title: Why there is a blank line at the top of the page?
body: <p>I've just learning HTML/CSS for a few days and I'm having trouble with this:
  <a href="https://i.stack.imgur.com/6fWsq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fWsq.png" alt="enter image description here" /></a>
  Why there is a blank line at the top of the page? Can someone tell me what was wrong or missing from my code? How can I fix it?</p>
  <p>Here's my code:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      body {
        margin: 0;
        padding: 0;
      }
      
      header {
        text-align: center;
        background-color: lightgray;
      }
      
      header h1 {
        font-size: 70px;
      }
      
      ul {
        background-color: gray;
        padding: 10px;
      }
      
      li {
        display: inline;
        margin: 0 5px 0 5px;
      }
      
      a {
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 18px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;My Website&lt;/h1&gt;
      &lt;p&gt;A sample website&lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HOMEPAGE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/header&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance!</p>