Why is my webpage not occupying the full screen?

This is the page through github: https://ayandagatsha.github.io/google-homepage/

and this is the page with code on codepen: https://codepen.io/ayandagatsha/pen/OJNXZEy

You need to
go to codepen
change vieuw
full page view
press the F11 key

Iā€™m really more concerned with why it looks weird through the github link. Thats my issue.

body{
margin:0;
}
This might help
Let me know

No difference. Github link still shows unecessary space at bottom of webpage

how about this?
for body tag
overflow:hidden;

Hey @ayandagatsha, to reply to your question:

Why is my webpage not occupying the full screen?

The answer is simple: nothing its telling it to do it:

all you have is a div content that has a height of auto, and so far the content is not big enough to cover the whole page.

You can see it in codepen as well if you toggle full page view as @KittyKora suggested.

There are tons of possible approach, but if you really feel like your content has to be always a screen of height, why not just:

min-height: 100vh

Hope this helps :slight_smile:

1 Like

Thank you. That worked. It brought my header content down a bit but i imagine a quick adjustment of padding will do the trick.