Usually, this type of issue can be visible mostly on mobile devices - phones and tablets.
When the horizontal overflow exists, visitors can scroll to the right, showing a space.
Common issues for the page horizontal scrolling
Most of the common issue that allows a page to have horizontal scrolling is caused by the following factors:
Elements (Section/Row/module) have a
widthset bigger than 100%Elements (Section/Row/module) have negative right margin set
Prevent horizontal scrolling
In any HTML page, we can prevent such an issue by setting the overflow property to hidden on the parent element.
Edit each section on the page
Go to Advanced Tab → Visibility
Set the Horizontal Overflow to Hidden.
Note: if the overflow still exists, it could mean that at least one section has its Width set to a value higher than 100% or the Margin Right option has a negative value.
Check the Design Tab > Sizing - for the Width option
Check the Design Tab > Spacing for the Maring Right option
Pro tip: any elements in a page layout should never have their Width or Max Width options set to values higher than 100%.
Identify which layout elements are creating the horizontal page scrolling (for advanced users)
To quickly identify which layout element(s) are creating the horizontal page scrolling, we can use the browser's DevTool, available in all modern browsers.
Load the page in your favorite browser
Right-click anywhere on the page
Choose Inspect from the contextual menu
Switch to Tablet/Phone responsive view
Create a new CSS rule in the DevTool inspector
Use this CSS code:
body * {
outline: 1px solid red;
}
The above CSS rule will add an outline border of 1px red color around each layout element, giving you a clear indication of which element is creating the horizontal scrolling.
Example: