How to make my navbar fit the max width value while not having enough content?-CodePudding

So I have a navbar that has like 4 links and I need it to be a specific width, and i want it to be responsive so I used max-width: 65em, however this results in it not being 65em unless theres alot of content inside which isn't there cuz of the nature of a navbar.

How do I make my nav bar content have a width of 65em while being responsive when i decrease screen size? Do I have to mess with media queries and breakpoints for is there a solution?

Navbar code:

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

CodePudding user response：

const Nav = styled.nav `
  margin-bottom: 5em;
  box-sizing: border-box;
  max-width: 65em;
  width:100% ;
  display:flex;
  justify-content: space-between;
`

<Nav>
      <Logo to="/">saif</Logo>
      <NavLinks>
        <StyledNavLink to="about">About</StyledNavLink>
        <StyledNavLink to="projects">Projects</StyledNavLink>
        <StyledNavLink to="coding-challenges">Coding Challenges</StyledNavLink>
        <StyledNavLink to="contact">Get in touch</StyledNavLink>
      </NavLinks>
</Nav>

Try giving width to nav in percentage . I have given 100% , you can change it to your convenience. Try running this code . I hope this solves your issue .