Want to get rid of border on header

Question

So I want to get rid of this white space/border between the top of the webpage and the header, so as to make it look more aesthetically pleasing. Does anyone have any tips?

#mainstyle {
  background-color: blue;
  color: white;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.header {
  padding: 90px;
  margin: 0px;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

<div class="header">
  <h1>Header</h1>
  <p>My supercool header</p>
</div>

[1] - https://i.stack.imgur.com/Lmd06.png - picture of website

Answer 1

You want to add margin: 0 to your body element.

#mainstyle {
  background-color: blue;
  color: white;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
  margin: 0;
}

.header {
  padding: 90px;
  margin: 0px;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

<div class="header">
  <h1>Header</h1>
  <p>My supercool header</p>
</div>

Answer 2

give margin to root 0

*{margin: 0;}