title: Body appearing in header?
body: <p>Trying to add content to my body to continue the flow of my site, but anything placed in the body is appearing in the top-left of the header.</p>
  <p>Any ideas for why this may be happening?</p>
  <p>Stack overflow wants me to write more content.
  Here's me writing more content.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;link href=&quot;flex.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  
          &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500&quot;&gt;
  
      &lt;/head&gt;
  
      &lt;header&gt;
          &lt;div id=&quot;header&quot;&gt;
              &lt;h1 class=&quot;title&quot;&gt;brookfield corp&lt;/h1&gt;
              &lt;nav class=&quot;top-nav&quot;&gt;
                  &lt;ul&gt;
                      &lt;a href=&quot;#recent&quot;&gt;&lt;li&gt;recent&lt;/li&gt;&lt;/a&gt;
                      &lt;a href=&quot;#samples&quot;&gt;&lt;li&gt;samples&lt;/li&gt;&lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;body&gt;
          &lt;h2&gt;recent&lt;/h2&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <pre><code>html {
      box-sizing: border-box;
  }
  
  .title {
      font-family: 'Frank Ruhl Libre', serif;
      text-align: center;
      font-size: 4em;
      background-color: hsla(140, 50%, 30%, .9);
      color:cornsilk; 
      padding: 30px 0px 30px 0px;
      margin: 0 auto;
      height: 100px;
      width: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
  }
  
  nav {
      font-family: 'Frank Ruhl Libre', serif;
      float: right;
      text-decoration: none;
  }
  
  li {
      color: black;
      list-style: none;
      display: inline;
      opacity: .7;
      text-decoration: none;
  }
  </code></pre>