body does not get the full page size

Question

I’m making a site (ETEC work), my teacher asked to use only HTML and CSS, I’m beginner, everything was perfect until I decided to add more stuff on the site, it creates normal scrollbar but gets all misaligned because the html and body tags do not fill the areas of all Ivs, I can’t even explain, I just want someone to help me. https://codepen.io/BrowGabriel/full/MMEzJK

Answer 1

Face start by putting these css, apart from the Navbar and the footer the rest of your body goes inside the main tag, try to use vh or % instead of px. The vh leaves the size you set equal on larger or smaller screens.

body{
  min-height: 100vh;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

footer{
  position: static;
  background-color: #2c5d88;
  bottom: 0vh;
  width: 100%;
}