title: Page won't resize correctly and have a Sticky Nav at the same time
body: <p>I'm working on designing a page that needs to have the Main Nav to be sticky. I can do this, but when I do the page no longer resizes correctly when the browser window is resized. It suddenly has a long blank space below the footer. But if I try removing the height property of the page, the sticky nav is no longer sticky. I've gone through my code a few times but can't seem to find where the correlation is. I've provided some screenshots as well as my code. Any help or push in the right direction would be appreciated!</p>
  <pre class="lang-css prettyprint-override"><code>  /* site page */
  
  #colocation_new {
    position: relative;
    width: 1920px;
    height: 4652px;
    background-color: white;
    overflow: visible;
    --web-view-name: colocation new;
    --web-view-id: colocation_new;
    --web-scale-to-fit: true;
    --web-scale-to-fit-type: width;
    --web-scale-on-resize: true;
    --web-enable-deep-linking: true;
  }
  
  
  /* Main Nav */
  
  #Main_Nav {
    position: sticky;
    width: 1920px;
    height: 112px;
    left: 0px;
    top: 0px;
    overflow: visible;
    z-index: 1;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/M7zSl.jpg" rel="nofollow noreferrer">Sticky Nav</a></p>
  <p><a href="https://i.stack.imgur.com/zHgeo.jpg" rel="nofollow noreferrer">Long White Space</a></p>