Navbarがその下の要素にアライメントしていない、なぜですか？

Question

Hosting Folder

リンクをクリックして「all.html」をクリックすると、「サンプル」と「テキスト」の2つの項目がある未完成のナビゲーションバーが表示されます。また、青いパディングがその下の白い背景に切れるという事実も見てください。

#topnav divのすべての要素の余白と埋め込みを試してみましたが、役に立たなくなりました。私はdisplay、float、およびtext-alignを変更しようとしましたが、現在の問題を解決するにはさらに問題が生じます。私は複数のチュートリアルを試してみましたが、この時点でnavbarのhtmlとcssの両方を書き直しましたが、私はこの問題に悩まされ続けています：navbarの青い部分が白くなります。ナビバーはhereのように表示されます。

青が適切なマージンとパディング幅でも白にカットされている理由を教えてもらえますか？ありがとうございました！ （ページがブートストラップv3.3.1を使用していることに注意してください）

HTML：

<div class="row" id="topnav"> 
    <ul> 
     <li> 
      <a href="#">Sample</a> 
     </li> 
     <li> 
      <a href="#">Text</a> 
     </li> 
    </ul> 
</div> 

CSS：あなたのul要素はdisplay: inlineを持っているので

#topnav{ 
    display: inline; 
} 
#topnav *{ 
    display:inherit; 
} 
#topnav ul{ 
    list-style-type: none; 
    text-align: center; 
    margin: 0; 
    margin-bottom: 55px; 
    background-color: rgb(0,93,164); 
    padding: 15px; 
} 
#topnav li{ 
    display: inline-block; 
    margin:0; 
    padding: 0; 
} 
#topnav a{ 
    text-decoration: none; 
    color:white; 
    margin: 0; 
    padding: 0; 
} 
#topnav a:hover{ 
    background-color:black; 
} 

Answer 1

です。 inline-blockまたはblockにそれを変更します。

#topnav ul { 
    display: block; 
} 

Answer 2

#topnav ul { 
    padding-bottom: 0px; 
}