title: Cant remove padding between nav-bar and banner css
body: <p>I ran into a small problem while creating my website where an anonymous padding appears between my banner and nav-bar:<a href="https://i.stack.imgur.com/lJCzc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lJCzc.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;style&gt;
      @import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
      nav {
        padding-top: 0px;
        position: fixed;
        width: 100%;
        transition: top 0.2s ease-out;
      }
      
      .banner {
        text-align: center;
        width: 100%;
        box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
      }
      
      nav ul#menu {
        padding-left: 0;
        display: flex;
        padding-top: 0px;
      }
      
      nav ul li {
        flex-grow: 1;
      }
      
      .nav-bar {
        /* Rectangle 1: */
        background: #FFFFFF;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
        width: 100%;
        text-align: center;
      }
      
      //-------------------------------------------------------
      /*Strip the ul of padding and list styling*/
      
      ul {
        list-style-type: none;
        margin: 0;
        position: absolute;
      }
      /*Create a horizontal list with spacing*/
      
      li {
        display: inline-block;
        float: center;
        margin-right: 1px;
      }
      /*Style for menu links*/
      
      li a {
        display: block;
        min-width: 140px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #fff;
        background: #2f3036;
        text-decoration: none;
      }
      /*Hover state for top level links*/
      
      li:hover a {
        background: #19c589;
      }
      /*Style for dropdown links*/
      
      li:hover ul a {
        background: #f3f3f3;
        color: #2f3036;
        height: 40px;
        line-height: 40px;
      }
      /*Hover state for dropdown links*/
      
      li:hover ul a:hover {
        background: #19c589;
        color: #fff;
      }
      /*Hide dropdown links until they are needed*/
      
      li ul {
        display: none;
      }
      /*Make dropdown links vertical*/
      
      li ul li {
        display: block;
        float: none;
      }
      /*Prevent text wrapping*/
      
      li ul li a {
        width: auto;
        min-width: 100px;
        padding-left: 0px;
        padding-right: 0px;
      }
      /*Display the dropdown on hover*/
      
      ul li a:hover+.hidden,
      .hidden:hover {
        display: block;
      }
      /*Style 'show menu' label button and hide it by default*/
      
      .show-menu {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #fff;
        background: #19c589;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
        display: none;
      }
      /*Hide checkbox*/
      
      input[type=checkbox] {
        display: none;
      }
      /*Show menu when invisible checkbox is checked*/
      
      input[type=checkbox]:checked~#menu {
        display: block;
      }
      /*Responsive Styles*/
      
      @media screen and (max-width: 760px) {
        /*Make dropdown links appear inline*/
        nav ul#menu {
          position: static;
          display: none;
        }
        /*Create vertical spacing*/
        li {
          margin-bottom: 1px;
        }
        /*Make all menu links full width*/
        ul li,
        li a {
          width: 100%;
        }
        /*Display 'show menu' link*/
        .show-menu {
          display: block;
        }
      }
      
      .hero-image {
        /* The image used */
        /* Set a specific height */
        height: 50%;
        width: 100%;
        /* Position and center the image to scale nicely on all screens */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;nav&gt;
      &lt;div class="banner animated"&gt;&lt;img class="hero-image" src="https://picsum.photos/1080/200/?random"&gt;&lt;/div&gt;
      &lt;div class="nav-bar"&gt; &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
        &lt;input type="checkbox" id="show-menu" role="button"&gt;
        &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Portfolio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>*View in full screen to see it.</p>
  
  <p>Is there a way I can fix this? Thank you in advance!
  As I have tried adding padding-top: 0px; to the nav bar so it could stick to the banner but it didn't work. My question is not a duplicate as the other questions problem is under a different circumstance.</p>