How can I remove extra white space on the right side of my Webflow site when scrolling to the left?

TL;DR

Inspect elements using Webflow’s Navigator and Chrome DevTools to find those with widths over 100vw, negative margins, or transformations causing overflow.
Apply overflow: hidden to the body or wrapper cautiously, and review interactions or animations that might move elements outside the viewport bounds.

Extra white space on the right side of a Webflow site that becomes visible when scrolling left is usually caused by elements overflowing the body or viewport. Here’s how to find and fix it.

1. Check for Overflowing Elements

Preview your site in Webflow and try scrolling horizontally. If there’s white space, something is likely wider than the viewport.
Select each section or div and check their widths. Look for elements with:
Fixed widths larger than 100vw
Negative margins
Transforms or absolute positioning that push them beyond the body

2. Use Webflow’s Navigator Panel

Open the Navigator panel to inspect your layout.
Look for elements with children that are not constrained (e.g., flex or grid children with min-width: auto or custom width settings).
Focus on new sections, sliders, or custom components that might cause layout shifts.

3. Set Overflow Hidden on the Body or Wrapper

Select the Body or a top-level wrapper (e.g., .page-wrapper)
In the Style panel, set Overflow: Hidden on the horizontal axis or both axes.
This will prevent overflow beyond the viewport
Be cautious: this may hide necessary elements like dropdowns or modals if not scoped properly

4. Check for Interactions and Animations

Go to the Interactions panel and review all animations.
Some move or scale elements off-screen, causing overflows during or after interactions.
Make sure animations return elements to within bounds, or use Overflow: Hidden on parent elements

5. Temporarily Highlight Overflow

Add a temporary outline or background color to key elements (like 100vw sections) to better visualize any that stick out of the viewport.
You can also add a temporary class (e.g., .test-width) and set max-width: 100vw and overflow: hidden to see if the scroll disappears.

6. Use the Chrome DevTools Approach

Inspect your published site in Chrome DevTools (Right click > Inspect).
Go to the Elements tab, select <body> or <html>, and slowly hover over child elements.
Look for elements that extend beyond the right edge—they’ll show an outline wider than the viewport.
In the Computed tab, check for applied styles like width, margin, transform, or position that might contribute.

Summary

Unwanted horizontal scroll is typically caused by elements exceeding the viewport width. To fix it, identify overflowing elements using the Navigator and DevTools, apply overflow: hidden where appropriate, and inspect interactions or styles that push elements out of bounds.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer