私のnavbarはページの中央に揃えられませんか？

Question

私のnavbarは、ページの中央に揃えられません。実際には、個々のリンクの間のマージンを変更するために追加したコードもうまくいきません、idkなぜそうですか。私は、ナビゲーションバーをバックグラウンド/私の側のスライドショー（ここには表示されていません）の前に移動する他の方法を見つけることができなかったので、ポジションを絶対にしました。私はフィドルを含んでいます。また、透明になる中心のナビゲーションバーを作ってみました。私の次の要素は後ろにあるようにしましたが、できませんでした。

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

#navbarセレクタのCSSルールを追加する方が良いでしょう。 .navのルールは、.navクラスのすべてのHTML要素に影響するためです。 #navbarセレクタを使用すると、ルールはそのIDを持つ特定のdivにのみ影響します。これは働い

#navbar a { 
    margin-right: 20px; 
} 

https://jsfiddle.net/ep93zz08/8/

Answer 2

は、ナビゲーションバーを中央にしようとしたとき、私は使用される一つの簡単な方法があるが.Li下またはul.li使用以下：

margin-left: auto; 
    margin-right: auto; 

か、次を使用して、それに独自のフレアを追加することができます。

#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; 
} 

次のHTMLをフォローアップするために：

<ul id="nav"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">CAPABILITIES</a></li> 
    <li><a href="#">ABOUT US</a></li> 
    <li><a href="#">RFQ</a></li> 
    <li><a href="#">CONTACT US</a></li> 
</ul> 

Answer 3

あなたはナビゲーションバーのIDにこのスタイルを追加することができます。あなたはナビゲーションバーのID上の絶対位置を使用し、その同じdiv要素のフレックスコンテナクラスのフレックス表示されているので、

left:50%; transform:translateX(-50%); 

あなたのCSSのいくつかを見なければなりません。 2つの異なる方法を使用してdivを中央に配置しようとしているようです。