I am new to css and react and I found a code of a navigation bar in reactjs online and I am trying to style it on my own and currently, it looks like this.

And here is what I am trying to make it look like

So the only thing that I am trying to do is to get the "sample" title to the left.

I thought it was a issue of flex direction so I changed justify-content:center to justify-content:flex-end but that did not work.

Here is my react code

return (
        <>
            <Nav scrollNav={scrollNav}>
                <NavbarContainer>
                    <NavLogo to='/' onClick={toggleHome}>sample</NavLogo>
                    <MobileIcon onClick={toggle}>
                        <FaBars />
                    </MobileIcon>
                    <NavMenu>
                        <NavItem>
                            <NavLinks
                            to='about'
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>About</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to='experience' 
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>API for business</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to='blog'
                            smooth={true}
                            duration={500}
                            spy={true}
                            exact='true'
                            offset={-80}>Blog</NavLinks>
                        </NavItem>
                    </NavMenu>
                   

                </NavbarContainer>
            </Nav>
        </>
    )
}

export default Navbar

And here is the styling part of it

export const Nav = styled.nav`
  background: #FFF;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: left;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;

export const NavbarContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  z-index: 1;
  width: 100%;
  padding: 0 24px;
  max-width: 1100px;
`;

export const NavLogo = styled(LinkR)`
  color: #000;
  justify-self: center;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  margin-left: 2px;
  font-weight: bold;
  text-decoration: none;
`;

export const MobileIcon = styled.div`
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
    color: #fff;
  }
`;

export const NavMenu = styled.ul`
  display: flex;
  align-items: right;
  list-style: none;
  text-align: center;
  margin-right: 2px;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavItem = styled.li`
  height: 80px;
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavLinks = styled(LinkS)`
  color: #000;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;

  &.active {
    border-bottom: 3px solid #01BF71;
  }
`;

export const NavBtnLink = styled(LinkR)`
  border-radius: 50px;
  background: #FFFFFF;
  white-space: nowrap;
  padding: 10px 22px;
  color: #010606;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`;

How can I solve this issue?

CodePudding user response：

In your NavbarContainer you have set the max-width property to 1100px.

The NavbarContainer won't expend past 1100px so it won't fill the whole header.

That's why the logo isn't on the far left you center your NavbarContainer with justify-content:center or set it flex-end.