Header.js

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import Nav from "./Nav";

const Header = () => {
  return (
    <MainHeader>
      <NavLink to="/">
        <img src="./images/logo.png" alt="my logo img" />
      </NavLink>
      <Nav/>
    </MainHeader>
  );
};

const MainHeader = styled.header`
  padding: 0 4.8rem;
  height: 10rem;
  background-color: ${({ theme }) => theme.colors.bg};
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .logo {
    height: 5rem;
  }
  img{
    position:absolute;
    top:5px;
    left:0px;
  }
  @media (max-width: ${({ theme }) => theme.media.mobile}) {
    img{
      position:absolute;
      top:-4px;
      left:-24px;
    }

  }
`;
export default Header;