title: Content goes over top of fixed navbar despite z-index
body: <p>I want the content to go beneath the fixed navbar, but it goes over the top of it. I cant figure out how to do this.</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 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 5px 5px -7px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  
  .logo {
    align-self: flex-start;
    padding: 0px 10px;
  }
  
  .logoutbutton {
    align-self: flex-end;
    margin: auto 30px;
    padding: 5px 10px;
    background: none;
    outline: none;
    border: 1px solid;
    border-radius: 2px;
    transition: 0.2s all;
  }
  
  .logoutbutton:hover {
    background: #eeeeee;
  }
  
  .layout-wrapper {
    display: flex;
    position: relative;
    top: 56px;
  }
  
  .left-navigation-drawer {
    display: block;
    position: fixed;
    height: 100vh;
    width: 270px;
    line-height: 50px;
    box-shadow: 5px 0px 5px -7px;
  }
  
  .left-navigation-drawer a {
    text-decoration: none;
    max-width: 100%;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    padding-left: 20px;
  }
  
  .left-navigation-drawer a:hover {
    background-color: lemonchiffon;
  }
  
  .main-content {
    position: relative;
    left: 270px;
    padding-left: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="logo"&gt;
        &lt;h3&gt;MyWebsite&lt;/h3&gt;
      &lt;/div&gt;
      &lt;input class="logoutbutton" type="submit" value="Logout"&gt;
    &lt;/div&gt;
    &lt;div class="layout-wrapper"&gt;
      &lt;div style="padding-top: 20px;" class="left-navigation-drawer"&gt;
        &lt;nav&gt;
          &lt;a href=""&gt;&lt;span&gt;&lt;i style="font-size:18px;" class="fas fa-keyboard"&gt;&lt;/i&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp; Content&lt;/a&gt;
          &lt;a href=""&gt;&lt;span&gt;&lt;i style="font-size:18px;" class="fas fa-info-circle"&gt;&lt;/i&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp; Account Details&lt;/a&gt;
          &lt;a href=""&gt;&lt;span&gt;&lt;i style="font-size:18px;" class="fas fa-user-cog"&gt;&lt;/i&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp; Account Settings&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div class="main-content"&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
        &lt;p&gt;some text&lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>