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 :)
CodePudding user response:
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>
CodePudding user response:
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;
}