title: How to remove gap between header and navbar?
body: <p>There's a strange gap between header image and navbar and I don't kow how to remove it!</p>
  
  <p><a href="https://codepen.io/alphanel/pen/NXgOoo" rel="nofollow noreferrer">Problem code itself</a>.<a href="https://i.stack.imgur.com/m0fVM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m0fVM.png" alt=""></a></p>
  
  <pre><code>&lt;!-- some css settings --&gt;
  #banner {
      width: 100%;
      height: 100px;
      margin-bottom: 0;
      margin-top: 0;
  }
  
  #nav_bar {
      background-color: #202020;
      margin-bottom: 0;
      margin-top: 0;
      z-index: 100;
  }
  </code></pre>