title: border-bottom is not working as expected
body: <p>I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9LTQM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9LTQM.png" alt="Desired output"></a></p>
  
  <p>But what i am getting out of my code is this:</p>
  
  <p><a href="https://i.stack.imgur.com/8WbKB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WbKB.png" alt="Actual output"></a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;batman&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;a href="#" class="logo"&gt;
                  &lt;img src="./img/bat_logo.png" alt="batman" /&gt;
              &lt;/a&gt;
              &lt;nav&gt;
                  &lt;ul style="list-style-type: none;"&gt;
                      &lt;li&gt;&lt;a href="#villains"&gt; Villains &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#identity"&gt; Identity &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#movies"&gt; Movies &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.logo {
      float: left;
      height: 50px;
  }
  #header {
      padding: 5px 0px;
      border-bottom: 1px solid;
  }
  </code></pre>