My navbar won't align with the center of the page? - html

Question

My navbar won't align with the center of the page. In fact any code i added to change the margins between each individual link is also not working, idk why that is. I made the position absolute because I couldn't find any other way to get the navbar to go in front of the background/ the slideshow in my side (not shown here). I have included a fiddle. Also I tried making a centered navbar that would be transparent, have my next element be behind it but I couldn't.
https://jsfiddle.net/ep93zz08/
HTML:
<div id="navbar" class="li flex-container nav row">
<a class="nav-link flex-item " href="index.html">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item " href="idex.html"><img id="logo" src="http://www.dynamicaudiovideo.com/_Media/samsung_logo_large.jpeg" alt=""></a>
<a class="nav-link flex-item" href="Investment.html">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
CSS:`
body{
margin:0;
overflow-x: hidden;
font-family: Calibri;
font-style: normal;
font-variant: normal;
background:black;
}
.nav{
position: absolute;
list-style-type: none;
display: inline;
z-index: 2;
text-align: center;
}
.resize-anchor{
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a{
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a:hover{
color:#D1946F;
text-decoration: none;
}
a:link{
color:#D1946F;
text-decoration: none;
}
.navlink, .hplogo-a{
text-align: center;
display:inline-block;
margin-left: 50px;
margin-right: 50px;
padding:0;
}
.nav-link{
color:white;
text-decoration: none;
white-space: nowrap;
text-align: center;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
margin-top: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
z-index: 3;
}
.li{
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
img{
width: 100%;
}
`

Answer 1

It would be better to add CSS rules for #navbar selector. Because rules for .nav will affect to all HTML elements with .nav class. Using the #navbar selector, the rules will only affect the specific div with that id. Try to remove the rules for .nav and add this:
#navbar {
position: relative;
list-style-type: none;
z-index: 2;
justify-content: center;
}
to adjust the margins between links:
#navbar a {
margin-right: 20px;
}
https://jsfiddle.net/ep93zz08/8/

Answer 2

One easy way that I used when trying to center the navbar is under .li or ul.li use the following:
margin-left: auto;
margin-right: auto;
Or you can use the following and add your own flare to it:
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
With the following html to follow up:
<ul id="nav">
<li>HOME</li>
<li>CAPABILITIES</li>
<li>ABOUT US</li>
<li>RFQ</li>
<li>CONTACT US</li>
</ul>

Answer 3

You can add this styling to the navbar ID.
left:50%; transform:translateX(-50%);
You should look at some of your CSS because you are using position absolute on the navbar ID and then display flex on the flex-container class of that same div. It looks like you are trying to center the div using two different methods.