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">
<head>
<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>
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
</body>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
}
