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.