HTML banner not correctly aligning towards the top of the page

Question

The code will always keep the div just under the top of the page, while not effecting the actual top. The div is the first of the page. (IDE: VS Code, Debug browser: MS Edge)

What I tried:

• Adding tags: Didn't change anything
• Removing margin + padding: Made it a null in the browser, still didn't change anything
• Translate/transform: Ruins crossplatform compatibility

html, body {
    margin: 0;
    padding: 0;
    background-color: gray;
    height: 100%;
    box-sizing: border-box;
}

#Banner {
    background-color: red;
    width: 100%;
    margin: 0;  
    padding: 0;
    box-sizing: border-box;  
}

#Image1 {
    width: 200px;
    height: auto;
}

#Projects button {
    display: none;
}

h1, p, #BannerText {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

<div id="Banner">
  <header>
    <h4 id="BannerText">FIRST PROJECT WILL BE COMING SOON</h4>
  </header>
</div>
<div id="Main">
  <h1>AU Programs</h1>
  <p>Hey! I'm an amateur programmer who loves to create and share projects.</p>
</div>

Answer 1

It’s the default margin on your <h4> element which is causing that space at the top. Just set the margin on that element to zero. Learn more about the CSS box model and how margins work.

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-color: gray;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

header {
  background-color: red;
}

header h4 {
  margin: 0;
  text-transform: uppercase;
}

<header>
  <h4>First project will be coming soon</h4>
</header>
<main>
  <h1>AU Programs</h1>
  <p>Hey! I'm an amateur programmer who loves to create and share projects.</p>
</main>