Why isn't this CSS margin 0 applied?

Combine:

body,
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

Into:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

Put it at the very top of your CSS document, directly under the first line, the charset line:

@charset "UTF-8";
body, html {
....

Also, you do not need to set a class for <div class="main">. You can simply use <main></main> and style it on your CSS document as main { background-color: none; } (notice that there is no . before the style for main in your CSS. It is one of the Semantic Elements in HTML5, so it is treated the same way body is.