title: section not appearing below header
body: <p>I'm trying to position my section below the header but it appears right below the nav. Also, the header only appears to be the nav and not the entire viewport of the page. I'm trying to figure out if I made a mistake on the CSS part of the code or if my HTML is structured wrong.
  This is what I have so far: </p>
  
  <pre><code>&lt;body&gt;
  
  &lt;header class="header-content"&gt;
      &lt;nav&gt;
          &lt;div class="nav-wrapper"&gt;
              &lt;div class="left-side"&gt;
                  &lt;div class="nav-link-wrapper active-nav-link"&gt;
                      &lt;a href="index.html"&gt;Home&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="nav-link-wrapper"&gt;
                      &lt;a href="mailto:wrvn.co@gmail.com"&gt;Email&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="nav-link-wrapper"&gt;
                      &lt;a href="resume.html"&gt;Resume&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="right-side"&gt;
                  &lt;div class="name"&gt;
                      &lt;a href="index.html"&gt;brand&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;/nav&gt;
      &lt;div class="hero-text-box"&gt;
          &lt;h2&gt;Hello,&lt;br&gt;
              I'm a web designer and developer based in Florida. My main focus is to 
              build minimalistic web sites that you can surf through as quickly and 
              efficient as posible.
          &lt;/h2&gt;
          &lt;h2 class="typewriter"&gt;Take a look at my work!&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;section class="project-display"&gt;
      &lt;h1&gt;Projects&lt;/h1&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  body, html {
      margin: 0;
  }
  
  .header-content{
      clear: both;
      top: 0;
      width: 100%;
      margin: 0;
      height: 100%;
      left: 0px;
      margin-left: 0;
      margin-bottom: 20px;
  }
  
  
  
  /* --- Nav Style --- */
  .nav-wrapper {
      display: flex;
      justify-content: space-between;
      padding: 40px;
      color: transparent;
  }
  
  /* left side */
  .left-side {
      display: flex;
  }
  
  .nav-wrapper &gt; .left-side &gt; div {
      margin-right: 20px;
      font-size: 0.9em;
      text-transform: uppercase;
  }
  .nav-link-wrapper {
      height: 22px;
      border-bottom: 1px solid transparent;
      transition: border-bottom 0.5s;
  }
  
  .nav-link-wrapper a {
      color: #8a8a8a;
      text-decoration: none;
      transition: color 0.5s;
  }
  .nav-link-wrapper:hover {
      border-bottom: 1px solid black;
  }
  .nav-link-wrapper a:hover {
      color: black;
  }
  
  .active-nav-link {
      border-bottom: 1px solid black;
  }
  .active-nav-link a {
      color: black !important;
  }
  
  /* right side */
  .nav-wrapper &gt; .right-side &gt; div {
      margin-right: 20px;
      font-size: 100%;
      text-transform: uppercase;
  }
  .name a {
      color: black;
      text-decoration: none;
      transition: color 0.5s;
  }
  
  .hero-text-box {
      position: absolute;
      width: 800px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  h2, .typewriter {
      margin-bottom: 0;
      margin-top: 0;
  }
  
  .hero-text-box h2, .typewriter {
      font-size: 30px;
      word-spacing: 2px;
      text-align: left;
      letter-spacing: 1px;
      color: rgb(83, 83, 83);
  }
  
  .typewriter {
      width: 44%;
      border-right: solid 2px black;
      white-space: nowrap;
      overflow: hidden;    
      color: black;
  }
  /* Animation */
  .typewriter {
      animation: animated-text 4s steps(29,end) 1s 1 normal both,
                 animated-cursor 600ms steps(29,end) infinite;
  }
  
    /* text animation */
  
    @keyframes animated-text{
      from{width: 0;}
      to{width: 44%;}
  }
  
    /* cursor animations */
  
    @keyframes animated-cursor{
      from{border-right-color: black;}
      to{border-right-color: transparent;}
  }
  
  
  /* --- Project Styles --- */
  .section {
      clear: both;
      padding: 0px;
      margin: 0px;
  } ```
  
  
  
  </code></pre>