Responsive mobile-first layout using flexbox

Hi @bfc0,

Good job completing the challenge. Looks good!

Here is what you can do to fix the background and prevent the scrollbar from appearing:

First, set the body min-height to fill the entire veiwport:

body {
  min-height: 100vh;
}

Then, replace the margin-top on the main tag in the media-query with padding-top:

@media (min-width: 900px) {
  main {
    padding-top: 8em;
  }
}

Then, replace the margin-top on the h1 tag with padding-top:

h1 {
  padding-top: 2.3em;
}

Finally, remove the margin-inline: 1em; on the h1 tag and reset margin to 0:

h1 {
  margin: 0;
}

The margins were what was causing the scrollbar to appear unnecessarily.

Hope that helps. Happy coding!