Mysterious padding/ extra space for no reason!?

Ok this has been driving me crazy for a long time and ive experienced this on multiple page layouts! Where on earth is this extra sliver of space coming from? I would like the navigation to cover the ENTIRE width of the page but that is so difficult. I also had to add a negative margin at the top so that the navigation wrapper would ‘eat’ the extra space that I was getting at the top of the page. There has to be a better way for laying out elements on a page. I feel like Im hacking it up here. Please help. How do I get this div background to cover the width of the entire page.

1 Like

Here’s some of the CSS. Any idea what’s going on here?

1 Like

I think it has something to do with the div being slightly off center for some reason… I believe that im getting an excess of the missing portion on the right side that is running off the page. Im not sure why this would be the case.

1 Like

Ok I was able to fix it by adding a -10px margin-left. I was really trying to only use Flexbox to format and have everything layout properly that way. not sure why the div seemed to be offset by 10px to the right. Any idea what is going on here? Im confused. Glad I ‘fixed’ it though…

1 Like

The body has a default margin around it, you only have to remove that by setting

body {
  margin:0;
}
1 Like

yeah im actually aware of that. But for whatever reason, in my markup ive already added a margin-top value of 20vh. Not really sure why I did that at this moment :sweat_smile: but im sure it was for some reason or another… but if I zero out the margin for the body now, I loose a 3rd of my page at the top.

but yeah, I see how now that that could be the initial problem. adding margin to the body prevents me from getting rid of the rest of the unwanted margins. the page is looking ok though so I guess ill just leave it? (even though my markup is a bit messy).

1 Like

You can keep your margin-top of course, just remove the other margins:

body {
    margin: 20vh 0 0 0;
}
1 Like

hmmm yeah for some reason Im getting the same result. I see why this should work…I thought it would. However, when I zero out the other values, it behaves the same as if I have all margins set to 0, seemingly ignoring my top value of 20vh.

1 Like

You also have a negative margin-top on your html element, which drags the whole page up again, sort of working against the positive margin-top of the body. That’s all I can read from the code you posted - if you need more help, you’d have to share your whole code (ideally on something like codepen).

1 Like

Could you be getting caught in the browser’s cache? Try an incognito window or a different browser. If you post the code in something like codepen I can check it with developer tools.

1 Like

https://codepen.io/TuscannyCodes/pen/PobJjmr

I think I fixed the issue. This is my first time using codepin so im not sure how well this will work but here goes nothing :sweat_smile: Im also wondering why is it that if I try to use an overflow-x: hidden to stop the ‘bump scrolling’ , it never seems to work for me. This is an issue ive encountered with not only this piece of markup but also nearly every other piece ive made. nearly. Thanks guys. Hope Im making sense.

1 Like

This is a common problem that many people fight with in the beginning. You always have to make sure that your elements aren’t wider than 100% of the page width, otherwise you’ll get horizontal scrollbars. Setting overflow-x:hidden sometimes “solves” it (well it actually just hides the problem). Some tips that can help:

Always put this at the top of your CSS:

* {
  box-sizing:border-box
}

It selects every element on the page and makes sure that paddings don’t increase the size of an element.


Never use vw for width, use % instead.

Specifically, these are causing problems on your page:

#navWrapper {
    width: 100vw; /* should be 100% */
}
#navWrapper, ul, li{
    margin-left: -10px;  /* should be removed altogether */
}

#boxYellow {
    width:99vw;  /* should be 99% */
    margin: 2vh;  /* should replaced by margin:2vh auto */
}

#boxRed {
    width:99vw;  /* should be 99% */
    margin: 2vh;  /* should replaced by margin:2vh auto */
}

The issue with margins is - you can always use them to space elements vertically. But a horizontal margin (left and right) will mess with the width of the element. Setting the horizontal value to auto is mostly what you actually want. It’ll center the element, and avoid horizontal scrollbars


You also have an extra closing brace } at around line 90, which can break stuff.


So, if you apply everything from above, the horizontal scrollbar disappears. You’ll still have that white border around your page, because you still have those default body margins which aren’t set to 0. But working around that by moving the navbar to the left with a negative margin isn’t the way to deal with that. So again, I’d suggest this:

body {
    margin: 20vh 0 0 0;
}

I’m not sure what you need that margin-top for, I’d rather give the body a margin of 0 and also remove the negative margin-top from your html. That way, you have no white borders and the page cleanly starts at the top.

2 Likes

hmm wow thanks so much! this really helps out a ton (you have no idea). i kinda understand why width’s shouldn’t use vw but its still a little confusing. what would be the point of even using the vw measurements if they are problematic in these scenarios if you don’t mind me asking?

It might seem weird that vw shouldn’t be used to set the width of an element (as mentioned, always use % instead), but some use cases for vw would be if % wouldn’t result in the correct value. For example: a big <h1> where the font size should grow with the page width:

h1 {
    font-size:5vw;
}

You can’t use % here because % for font-sizes is based on the font-size of the parent container, not its width. But generally, I almost never use vw.

1 Like

that makes sense. man, thanks a bunch! markup is looking and feeling much cleaner now.

Awesome, keep coding :love_you_gesture:

1 Like

will do! :call_me_hand: