htmlcssbanner

HTML banner not correctly aligning towards the top of the page

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:

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>

Solution

  • 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>