I have a very simple page, and for some reason, The content on the right spills over and creates the option to horizontally scroll, something that I definitely do not want. I am trying to debug it, but cannot seem to find the correct element that is causing the horizontal scroll, and was wondering if somebody could impart some wisdom on the matter.
Also – Side note, in code pen you don’t need the html/head/body tags. Anything that needs to go in the header can be put there by clicking on “HTML” at the top of the page. Also I noticed you have font attributes set on several individual elements and they are all identical. I would recommend condensing them.
I think they easiest thing to do would be to use normalize.css instead of that reset and set overflow-x on your body/html to hidden. That way, if you ever want to move something off screen to have a fly-out panel or whatever, you’re covered. It’s not going to show.
Using overflow:hidden is literally hiding the problem, not solving it.
@Paulie_D from the way you said this, it almost sounds like you’re saying if you ever use overflow: hidden, you’re not doing something the correct way. You’re making it sound like there’s never a legitimate use for that declaration, where there absolutely is.
I’m going to give you the benefit of the doubt and say you didn’t mean it this way. But, I would like to preserve the record for posterity.
I’m going to add to the conversation for @tjgriffiths1 ‘s benefit. It was mentioned that the problem was the overabundance of padding. Well, that wasn’t fully the problem.
There were two problems. Unless he understands them both, changing box sizing doesn’t help any more than overflow:hidden.
The first was the use of padding with a 100% width on the footer. The default box model (content-box) adds padding to the defined width, so the footer was greater than 100% width in total, with the padding. Two things to mention here: one is that changing the box model will, as Paulie mentioned, change the way the width is calculated so that the declared width includes padding. And two, block level elements by default will take up all available width without the need to declare width: 100% – further, any horizontal padding will not expand the width beyond 100% (if the width is not declared).
The second problem was that browsers by default will use either a left margin or left padding to indent lists. You set the #navlist to 100% and it had a default left padding (webkit and moz) making it greater than 100%. You could have cleared the default padding and/or not declared 100% width. Now, because the list is floating, the width is needed, however you don’t the float either, you could contain the child floats with other methods, or leave the float and width on the ul so long as the padding is cleared.
So, to clarify, neither the overflow: hidden nor the change in box-sizing is needed. Neither method is wrong either. What’s important is to understand what is happening and why and then apply the changes you want to correct.
edit// I should also mention that the overflow-x: hidden method has another drawback in that the elements content will not be centered, but slightly off because the extra width off to the right is being cut off (hidden) – the element with a width greater than 100% doesn’t center, but starts on the left…