Navbarが全幅に拡大していませんか？

Question

Host Folder

リンクをクリックしてから「all.html」をクリックすると、未完了のナビゲーションバーが表示されます。リスト内のliは、何らかの不明な理由によりスタッキングしています。誰かがなぜ「メンバーリソース」とその上の行が下にあるのか、それを修正する方法を教えてもらえますか？私は、div、ul、およびliを含むtext-align、float、width、およびmarginsを試してみましたが、どこにもいませんでした。ありがとうございました（注：ブートストラップv3.3.6を使用）！

HTML：

<div class="row" id="topnav"> 
    <ul> 
     <li> 
      <a href="#">Home</a> 
     </li> 
     <li> 
      <a href="#">About</a> 
     </li> 
     <li> 
      <a href="#">Contact</a> 
     </li> 
     <li> 
      <a href="#">Sponsor</a> 
     <li> 
      <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a> 
     </li> 
    </ul> 
</div> 

CSS：

#topnav{ 
    display: inline; 
} 
#topnav *{ 
    display:inherit; 
} 
#topnav ul{ 
    list-style-type: none; 
    margin: 0; 
    margin-left: auto; 
    background-color: rgb(0,93,164); 
    padding: 1.5%; 
    display:inline-block; 
} 
#topnav li{ 
    margin:0; 
    padding: 0 2.5%; 
    } 
#topnav a{ 
    text-decoration: none; 
    color:white; 
    margin: 0; 
    padding: 0; 
    font-weight:600; 
} 

追記：ページの一番下にスクロールバーがあり、なぜ誰もが知っていますか？右に余分な内容はありません。私はそれを遠くに押し出す余白がないと確信しています。私はChromeでそれを見て、他の誰かがそれを見て、それがなぜ起こっているのか知っていますか？

Answer 1

あなたは全幅にそれを設定するための#topnav ul% 100の幅を設定する必要があります。

#topnav ul{ 
    list-style-type: none; 
    margin: 0; 
    margin-left: auto; 
    background-color: rgb(0,93,164); 
    padding: 1.5%; 
    display:inline-block; 
    width: 100%; 
} 

全幅ナビゲーションバーを参照する2番目の方法は、ブートストラップのガイドとして行うことです

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="row" id="topnav"> 
     <ul> 
      <li> 
       <a href="#">Home</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
      <li> 
       <a href="#">Sponsor</a> 
      <li> 
       <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a> 
      </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

は、ナビゲーションバーが全幅であり、異なる色（左のことに注意することが十分に確認してくださいと言います意図的にあなたが気づくことができます）。あなたのulから背景色を削除し、代わりにnavbarクラスに置くことができます

Answer 2

これを試してみてください：

HTML

<div id="topnav"> 
    <ul> 
     <li> 
      <a href="#">Home</a> 
     </li> 
     <li> 
      <a href="#">About</a> 
     </li> 
     <li> 
      <a href="#">Contact</a> 
     </li> 
     <li> 
      <a href="#">Sponsor</a> 
     <li> 
      <a href="#">All the rest of the li's are like the ones above, I've ommitted them to save space</a> 
     </li> 
    </ul> 
</div> 

CSS

#topnav{ 
    display: inline; 
} 
#topnav *{ 
    display:inherit; 
} 
#topnav ul{ 
    list-style-type: none; 
    margin: 0; 
    margin-left: auto; 
    background-color: rgb(0,93,164); 
    padding: 1.5%; 
    display:inline-block; 
    width: 100%; 
} 
#topnav li{ 
    margin:0; 
    padding: 0 2.5%; 
    } 
#topnav a{ 
    text-decoration: none; 
    color:white; 
    margin: 0; 
    padding: 0; 
    font-weight:600; 
}