There are times when you’ve added your own custom styling to a website and begin to notice the horizontal scrollbar across the bottom of your browser window, or when on mobile devices you can to move the content left and right on the screen.

This is not something we want. It does not look great and it gives a poor user experience.

This is sometimes caused by an element which is wider than it’s container so part of it hangs off the edge of the page. You will want to investigate and find out which element is causing this and fix it.

However, sometimes you will want parts of your design hanging off the edge of the page to create a certain look or effect.

To get rid of this horizontal scroll, we add a few lines of CSS.

Adding the CSS

Place the below CSS snippet into your child themes Style Sheet or if you are not using a child theme then you can go to Divi > Theme Options > CSS

Place the following snippet.

#page-container {
overflow-x: hidden;
}