CSS space between inside another flex element

January 10, 2023

I am trying to make simple nav-bar with logo, nav-links and button. and space everything evenly

I have wrapper around those 3 items and i apply display:flex and than inside list i again apply display:flex but justify-content doesn’t affect list items, they are merged together.

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;

    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>

>Solution :

You can use gap. https://developer.mozilla.org/en-US/docs/Web/CSS/gap

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;
    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    gap: 20px; /* add gap */
    margin: 0;
    padding: 0;
    list-style: none;
    
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>