White Space on right side of section

HTML-CSS
1

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:
https://codepen.io/redmauss/pen/JjRdyzP
Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

Which section has the space?

3

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

4

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

5

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

6

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

7

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

8

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:
position:relative;
top:5.25rem;

Or:
padding-top:5.25rem;

1 Like
9

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: