title: Why does my page header have gaps around it without color?
body: <p>I was trying to fill the entire <code>&lt;header&gt;</code> with the background color, but the problem is that when I try to view the page, instead of filling the entire <code>&lt;header&gt;</code> with the color, there are white color borders on top, left and right of the <code>&lt;header&gt;</code>. May I know the reason why the background color doesn't fill the whole <code>&lt;header&gt;</code> space entirely?</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>header {
    background-color: #ECF3F3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Food Hunt&lt;/h1&gt;
    &lt;/header&gt;
    &lt;nav&gt;
    &lt;/nav&gt;
    &lt;aside&gt;
    &lt;/aside&gt;
    &lt;footer&gt;
    &lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>