my justify-content on navbar isn't working, How can i fix it?

PineapplePizza9538 0
Viewed 27

I'm trying to find someone with the same problem. but still don't understand
my justify-content property not working on navigation bar.

   nav {
        display: flex;
        padding: 2% 3%;
        justify-content: space-around;
        align-items: center;
    }
    
    .nav-links {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    
    .nav-links ul li {
        list-style: none;
        display: inline-block;
        position: relative;
        padding-bottom: 0.5rem;
    
    }
    
    .nav-links ul li a {
        color: #fff;
        text-decoration: none;
    }

*edit
i can't post all code so i decide to put it in this link.

https://jsfiddle.net/hox4dsnp/1/

I need help. Thank you :)

css html
2 Answers
nav ul{
    display: flex;
    padding: 2% 3%;
    justify-content: space-around;
    align-items: center;
}
 
nav ul li{
        list-style: none;
        display: inline-block;
        position: relative;
        padding-bottom: 0.5rem;
}

nav ul li a{
    color: #2b2b2b;
    text-decoration: none;
}

    <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </nav>
userIISl10

Do you mean that there is no spaces after applying justify-content: space-around? If so, please try to remove flex: 1 from .nav-links.

It is occupying the remaining spaces as flex-grow: 1 does.

You may find more about flex: 1 from here

UPDATE:

If you are trying to put spaces between your list item, try

.nav-links ul{
    display: flex;
    justify-content: space-between;
}
Tin Mar0
Related