Fix horizontal scroll
Why does it happen
Horizontal scroll happens when the width of the elements on the page is wider than the size of the screen. Unless you set overflow:hidden to one of the parent elements, this horizontal scroll will persist on the page, but doing that is not always the optimal solution. It can happen due to various layout settings or less frequently, due to hidden characters, long links or words.
How to identify the issue
Usually, you’ll be able to tell which element is responsible for it as it’ll be obvious or happen on an element you’re building at the time. But if the cause isn't obvious, one great option to pinpoint the issue is identification by substraction.
Start by deleting section after section until the horizontal scroll disappears
Once you identify the section, go deeper into it and remove elements until you find the culprit
Keep in mind that it might appear that multiple elements are causing the issue and overflowing, but it’s usually just one element that’s expanding the elements and giving other elements space to overflow.
You can also do this on a published website by using browser specific debugger if you prefer to do that or if you only see the problem on a published website.
Problems and solutions
Common problems that might cause horizontal scroll
Using 100vw to limit content width can be a reason for a small horizontal scroll.
Adding or pasting hidden characters can prevent text from breaking properly.
Long links might not break properly, especially on smaller screens.
Usually happens when using german, swedish or other languages with longer words
Good to know
Avoid it by design
You can limit the occurance of horizontal scroll by learning how to build sites according with the best practices. One amazing way to achieve that is to use Client-first style system, or even well built libraries like Relume.
A lot of the problems with horizontal scroll will only show up on lower breakpoints so you have to test your website both in Webflow with it’s responsive breakpoints as well as on actual devices users will use.
If you’re using position:sticky, it will not work properly if parent elements are set to overflow :hidden. That’s why you don’t want to set overflow:hidden to body or any high level div to avoid future incompatibility.