CSS Margin не установлен на 0

Вы можете изменить свойство margin на margin: 0! Important; Это быстрое решение, я тоже могу подробно объяснить.

Просто добавьте! Important с полем: 0, которое вы использовали внутри тела. Нравится--

body{
margin:0 !important;
}

Базовый HTML имеет свои собственные поля и отступы для каждого элемента. Если вы хотите сделать маржу 0, вам нужно сделать сброс css только для одного элемента, например тела, или вы можете сделать сброс css для всех элементов (так лучше). Я использую css reset от eric mayers. Вот.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Вы можете поместить его в начало вашего файла css. Или создайте другой файл css. И свяжи его перед своим стилем. Вот готовый код со сбросом и ваш код

//css reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
// 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;
}

Не рекомендуется использовать! Important. У вас не будет действующего кода.

Комбинировать:

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

В:

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

Поместите его в самый верх вашего документа CSS, прямо под первой строкой, строкой кодировки:

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

Кроме того, вам не нужно устанавливать класс для <div class = "main">. Вы можете просто использовать <main></main> и стилизовать его в своем документе CSS как main { background-color: none; } (обратите внимание, что перед стилем main в вашем CSS нет .. Это один из семантических элементов в HTML5, поэтому он обрабатывается так же, как и body.