Flexbox navigation bar

Question

<nav id="navbar">
    <div id="logo">
        <img src="logo.png" alt="www.lunchbox.com">
    </div>
    <ul>
        <li class="item"><a href="#home">Home</a></li>
        <li class="item"><a href="#services-container">Services</a></li>
        <li class="item"><a href="#contact">Contact Us</a></li>
        <li class="item"><a href="loginsignup.html">Login/ Signup</a></li>
    </ul>
</nav>



#navbar ul{
    display: flex;
    font-family: 'Baloo Bhai', cursive;
}


#navbar ul li{ 
    list-style: none;
    font-size: 1.3rem;
    align-items: end;
}


#navbar ul li a{
    color: white;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}



#navbar ul li a:hover{
    color: black;
    background-color: white;
}

in flex box navigation bar how to make one element on right side(Login/signup) and rest home, about on left. I am using a list then making it flex box. as you can see, there might be some problem with html and I might have to remove the last one from the unordered list so that I can span it to the right side.

Answer 1

This is how you can do this update this css code :-

      nav#navbar {
        display: flex;
        align-items: center;
    }
    #navbar ul {
        display: flex;
        font-family: 'Baloo Bhai', cursive;
        flex-grow: 1;
    }

#navbar ul li{ 
    list-style: none;
    font-size: 1.3rem;
    align-items: end;
}

#navbar ul li a {
    color: #000;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}
#navbar ul li:last-child {
    margin-left: auto;
}

#navbar ul li a:hover{
    color: black;
    background-color: white;
}