我的导航栏不会与页面中心对齐？

我的导航栏不会与页面中心对齐。事实上，我添加的任何代码来更改每个单独链接之间的边距也不起作用，我知道为什么会这样。我将位置设置为绝对位置，因为我找不到任何其他方法让导航栏位于背景/幻灯片前面（此处未显示）。我已经包含了一个小提琴。我还尝试制作一个透明的居中导航栏，让我的下一个元素在它后面，但我不能。

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%;
}
`