title: Why are my header and main sections separated by white space?
body: <p>I am trying to create a hero box but my herobox and navbar have white space inbetween. I can not get rid of it! I am guesing it has to do with flexbox and/or grid but i'm not sure.</p>
  <p>I colored the nav purple and the herobox blue to try to figure why they don't follow each other. I tried messing with the margin and display in CSS.</p>
  <p>Chrome inspection of elements:</p>
  <p><a href="https://i.stack.imgur.com/HZQqL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZQqL.png" alt="enter image description here" /></a></p>
  <p>My code so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
    margin: 0;
  }
  
  main {
    margin-top: none;
  }
  
  
  /*NAVIGATION BAR*/
  
  header {
    height: fit-content;
  }
  
  .topnav {
    overflow: hidden;
    background-color: blueviolet;
  }
  
  .left {
    padding: 20px;
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
  }
  
  .right {
    padding: 20px;
    float: right;
    width: 50%;
    box-sizing: border-box;
    text-decoration: none;
    text-align: right;
  }
  
  @media screen and (max-width: 800px) {
    .left,
    .right {
      width: 100%;
      /* The width is 100%, when the viewport is 800px or smaller */
    }
  }
  
  
  /*HERO BOX*/
  
  .hero {
    background-color: aqua;
  }
  
  h1 {
    font-size: 15vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;!--NAVIGATION BAR--&gt;
    &lt;nav&gt;
      &lt;div class="topnav"&gt;
        &lt;div class="left"&gt;
          &lt;a href="#Coupons"&gt;
            &lt;p&gt;Coupons!&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt;
          &lt;a href="#Order"&gt;
            &lt;p&gt;Order Online!&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;div class="hero"&gt;
      &lt;h1&gt;Super Restaurant!&lt;/h1&gt;
      &lt;button&gt;&lt;a href="#menu"&gt;View our menu!&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>