Problem with the body and html containers on my screen

I’m doing the “Learn HTML forms by Building a Registration Form” project, but locally on my computer.

On the steps 8 and 9 is says to set the body height to 100vh but it causes the body container to get larger than the screen. I discovered that this is happening because the body container is displaced a little bit down, and that little bit is outside the scope of the body container so I can’t modify it in any way.

Tried to change the height of the html container thinking it would fix the problem somehow, but this container is actually placed that bit up. So it’s almost like the html and body containers are displaced with respect to each other.

It’s kind of weird and I think it might have something to do with my screen but I can’t figure it out.

I’ll leave some screenshots so you can see what’s happening:

As you can see, there’s that little white space that the body container doesn’t cover.

EDIT: apparently I can upload more than one image because I’m a new user. To the moderators of the forums, please change this, it’s a ridiculous rule, very unhelpful. I can’t explain my problem properly with only one image. What should I do now?

So, as you can see, it’s almost like the containers are displaced. This is causing vh to not work properly, but I’m not sure how to handle this because that bit is outside the scope of the containers, and I don’t want to change the value to something like 98vh because even if that fixes it on my screen, it might look different on other screens and I want to find a fix that I can apply when I’m working on actual websites that will be seen on many different screens.

Sorry for the very long post. Thank you!

EDIT2: I’ll leave the code because someone asked for it, though the problem is not there, but anyway:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Registration Form</title>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
body {
    width: 100%;
    height: 100vh;
    margin: 0;

I’ll leave the rest of the screenshots here:

The html container covers that little white bit, but it ends before it should so it leaves that little white bit on the bottom instead of the top like the body container:

Please post your actual code instead of pictures.

Please post your actual code instead of pictures.

The code is exactly what they asked, the problem is not there.

Please post your actual code instead of pictures.

We cannot run a picture to explore the behavior ourselves.

It is the default margin on the h1 that is pushing the content down.

h1 {
  margin-top: 0;

The margin is overflowing in the freeCodeCamp editor and not pushing (didn’t look to see why).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.