title: Why isn't this CSS margin 0 applied?
body: <p>I set <code>&lt;body&gt;</code> to <code>margin: 0;</code> yet it leaves 8px of space. How can I clear this white space?</p>
  <p>The navbar should be touching the side and the top of the page. <code>&lt;img /&gt;</code> and <code>&lt;h1&gt;</code> should be touching the side of the navbar:</p>
  <p><a href="https://i.stack.imgur.com/iX5yN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iX5yN.png" alt="enter image description here" /></a></p>
  <p>CSS (Sass) :</p>
  <pre><code>// Imported fonts:
  @font-face {
    src: url(fonts/MajorMonoDisplay-Regular.ttf);
    font-family: MojoMono;
  }
  
  //Color Variables:
  $colors: (
    backGroundColor: #c1a5c6,
    purpleBorder: #511a59,
    greyFont: #373647,
    navButtonColor: #ea7985,
    redButtonBorder: #b53f4b,
  );
  
  //Body:
  body,
  html {
    height: 100%;
  }
  body {
    margin: 0;
    padding: 0;
  }
  
  h1 {
    font-family: MojoMono;
    font-size: 60px;
    color: map-get($color, greyFont);
  }
  
  img {
    border: solid 4px map-get($color, purpleBorder);
  }
  
  //Navbar:
  .nav {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
    background-color: gainsboro;
    padding: 5px;
    border: solid 10px $darkAccentColor;
  }
  
  .nav img {
    height: 100px;
    border: none;
  }
  .nav h1 {
    font-family: fantasy;
    font-size: 30px;
    color: map-get($color, greyFont);
    margin: 0px;
  }
  .nav button {
    flex-direction: row;
    background-color: map-get($color, navButtonColor);
    color: map-get($color, greyFont);
    border: solid 4px map-get($color, redButtonBorder);
    padding: 10px 20px;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
  
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
  
      &lt;title&gt;Hidden Expressions&lt;/title&gt;
  
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;
  
      &lt;script defer src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The React element:</p>
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import Navbar from './NavBar';
  
  export default class Main extends React.Component {
    render() {
      return (
        &lt;div className=&quot;main&quot;&gt;
          &lt;Navbar /&gt;
          &lt;div className=&quot;header&quot;&gt;
            &lt;h1&gt;Our Story&lt;/h1&gt;
            &lt;img src=&quot;https://for.eharmony.com/dating-advice/wp-content/uploads/2013/09/dating-a-hairdresser.jpg&quot; /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>When I 'inspect' in browser it does not show that I set the margin to 0. But when I set it to 0 in the browser it looks like it should.</p>
  <p>Browser inspection:</p>
  <p><a href="https://i.stack.imgur.com/oh3s8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oh3s8.png" alt="enter image description here" /></a></p>
  <p>After editing in browser:</p>
  <p><a href="https://i.stack.imgur.com/wlpzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wlpzI.png" alt="enter image description here" /></a></p>