How come body doesn't take up whole page?

You can’t see it in the code pen but when I open same code with live server in vsc code there is a white rectangle along the bottom of the screen.

Dev tools show that it is not included in the body.

Hi @gtrman97

I don’t see what you are describing at the bottom but I see this. Your app is not responsive. Avoid using px. I recommend you go for relative units.

The body is the height of its content. You have set no explicit height. You can use a min-height of 100vh.

If you only want the scroll bar to show up when needed (when the form is tall enough) you have to remove some margins as well.

Example

body {
background: linear-gradient(to bottom, aqua, blue);
background-repeat: no-repeat;
min-height: 100vh;
margin: 0;
}

#title{
text-align:center;
font-family: ‘Bungee Shade’;
margin: 0;
}