css - border-bottom は要素の上に表示されます

Question

下の境界線がナビゲーションバーの下に表示されない理由がわかりません。#topheader を追加するまでは問題なく機能していたので、それが私の問題だと思います。もしそうなら、ブラックボックスを上に置くためのより効果的な方法はありますか? 助けてくれてありがとう

<header>
<div id="topheader">
<div class="wrapper">
<div id="logo">
    <h1>TheWay</h1>
</div>
</div>
</div>


 <!--  Navigation Bar -->

 <div class="wrapper">

 <div id="nav_bar">

 <nav>

 <a href="home.html">Home</a> 

 <a href="blog.html">Blog</a> 

 <a href="music.html">Music</a> 

 <a href="events.html">Events</a> 

 <a href="contact.html">Contact</a>
 </nav>
  </div>
</div>
 </header>

完全なコードは次のとおりです: http://tinker.io/a31d6/2

Answer 1

あなたの例ではボーダーボトムがまったく見えませんが、それを #nav_bar に追加していると仮定して、overflow: hidden を #nav_bar に追加してみてください。うまくいけば、これはあなたが望むことをします。

Answer 2

There seems to be problem with float: left;

#nav_bar nav a {
    /* ... */
    float: left;
    /* ... */
}

You can try replacing the float with display: inline-block;