How to align nav-item to center of page - html

Question

* {
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">HOME</li>
<li class="nav-item">ABOUT ME</li>
<li class="nav-item">PROJECTS</li>
<li class="nav-item">CONTACT</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.

Answer 1

Set the width of the nav to full width, and then use text-align: center.
nav {
width: 100%;
text-align: center;
}

Answer 2

there are so many ways to that but I'll prefer to use flexbox or css grid in
'nav-list'.
here's the example using felxbox:
.nav-list {
display:flex;
justify-content:center;
align-items: center; (if want to align vertically as well)
list-style-type: none;
}
it will resolve your problem, copy paste and enjoy.

Answer 3

just add this in css and it will be in center
.nav-list{
display: grid;
justify-content: center;
}

Answer 4

your styles are not correct css syntax.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
.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;
}
header {
background-color: #313131;
height: 50rem;
}
<nav>
<div class="nav-container">
<ul class="nav-list">
<li class="nav-item">HOME</li>
<li class="nav-item">ABOUT ME</li>
<li class="nav-item">PROJECTS</li>
<li class="nav-item">CONTACT</li>
</ul>
</div>
</nav>