Personal Portfolio Webpage - Build a Personal Portfolio Webpage

[GuwnH]

Hi, I am making my personal portfolio webpage project, but when I put my code into codepen, the display shows my project section covering up the entire webpage. However, the built in display for freeCodeCamp shows what I have intended, which is an evenly spaced out webpage with roughly equal sized sections. I have no idea why there is a such huge difference in displays please help.

Here is my codepen page: https://codepen.io/guwnh/full/vYPgWYX

[lasjorg]

It is because the fCC editor output is inside an iframe and other parent containers that have a height set on them. So you can use that for percentage-based heights. Without that, any height: 100% will not be calculated correctly (there is no parent height to calculate the percentage from).

You have a few options but adding a height to the html and body is probably the simplest.

html,
body {
  height: 100%;
}