* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
nav {
position: absolute;
margin: auto;
.nav-container {
padding-right: 2rem;
padding-left: 2rem;
padding-bottom: 2rem;
margin-top: 2rem;
margin-right: auto;
margin-left: auto;
.nav-list {
list-style-type: none;
.nav-item {
display: inline-block;
padding-left: 2rem;
padding-right: 2rem;
font-size: 1.2rem;
.nav-link {
text-decoration: none;
color: #fbfdff;
}
}
}
}
}
header {
background-color: #313131;
height: 50rem;
}<nav>
<div class="nav-container">
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
<li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li>
<li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li>
<li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li>
</ul>
</div>
</nav>How can i align nav-item to center of the nav-container ? Navbar should has transparent background, so i wanted to add position: absolute; style to nav element. Also all nav-item s should appear side by side. That’s why i added display: inline-block; style to them.
>Solution :
Set the width of the nav to full width, and then use text-align: center.
nav {
width: 100%;
text-align: center;
}