Survey Form - not centered - SOLVED

[kmroncancio]

FCC Survey Form

Here’s my Survey Form (not complete) and for some reason I can’t figure out why the form and the h1/p elements at the top are not centered.

[bbsmooth]

body  {
    /* ... */
    width: 100vh;
    height: 100vh;
  }

Are you sure you want to set the width of the body to the height of the viewport? Personally, I don’t think you need to set the width at all since the body will by default take up the entire width of the viewport.

[kmroncancio]

That’s interesting.
Originally, I was writing this with VS Code and viewing it with Live Server and the background image did not cover the screen. The only way I could figure out to fix it was to set the width/height to 100vh.

I only copied it over to codepen to share it here. When I remove those two lines in codepen, it fixes the centering problem.

Do you happen to know why this is? Why is the same exact code doing different things?

Edit: I misread your comment. If I only remove the width and leave the height, then it fixes both problems. Thanks!

[lanceamd]

Hi @kmroncancio. Im not sure if this came across when you were figuring it out, but view width and view height are vw and vh. Your width was set to vh (not vw). Take care