White Space on right side of section

There is a white space to the right of one of my sections, I have tried fiddling with height, width, and margin values to no avail.

Does anyone know what’s going on?

Codepen link:
Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Which section has the space?

It’s the projects section, you have to use the scroll bar in order to see it in editor mode.

In the css (line 96) there is padding with no value.
In the html there is no opening and closing body tag.

Thanks for pointing that out, I changed those lines but the white space is still there unfortunately.

Your .pject divs are pushing outside of the grid.
Try reducing or removing the margin-left on the .pject

Tried removing the margin entirely, still no change to the white space to the right sadly. Any other ideas?

Hi, I have viewed your codepen and your issue stems from your #welcome {} selector, in which you have placed a non-specific padding around the element.
This means in addition to pushing it downwards, avoiding it being blocked by your nav-bar with the position:fixed rule, your padding also adds extra width/height to the side of the welcome section and bottom.
This is also the reason why you have a horizontal scrollbar in addition to the vertical.

To fix, either delete the padding property and instead use:


1 Like

Thanks! This fixed it. I also appreciate you explaining why it created the white space. Now I can finish my last HTML project. :slight_smile: