I was super tired when I posted this. It’s a old trick but one for the record books in terms of usefulness.

Basically, if you’re a web developer, there will be many times in your career that a site ends up with a gross unintended horizontal scrollbar. It’s always a content/layout issue and usually something you didn’t expect to take up horizontal space. Usually, setting:

overflow: hidden-x;

Will fix the offending element. But first you need to find it. Which may or may not always be clear depending on the size of your site. So how to find these offenders!

Simple:

[pastacode lang=”css” manual=”*%20%7B%0A%09%09outline%3A%201px%20solid%20red%3B%0A%09%7D” message=”” highlight=”” provider=”manual”/]

scroll down and right and you should find the highlighted block of content that’s causing the issue. It’s a wonderful trick because it makes things so visually clear.