If you have encounter fighting a mysterious vertical white strip on the right side of your dark-mode WordPress site, you are not alone.
I recently spin my head debugging this exact issue. I tried everything: hiding the overflow, coloring the scrollbar, hunting for “too wide” elements with JavaScript, and even rolling back plugin updates. Nothing worked.
The symptom was subtle but infuriating: a persistent white “gutter” on the right edge of the screen. On closer inspection, it wasn’t just empty space—it was a second scrollbar.
If you are using a modern page builder like Elementor combined with a complex theme (like Phlox), this guide will save you the headache I just went through.
The Symptoms
- The White Strip: Your website has a dark background, but there is an ugly white vertical bar on the far right edge.
- The Double Track: If you look closely (or use a mouse), you might see two scrollbar tracks sitting right next to each other.
- The “Stuck” Scroll: Scrolling feels heavy or glitchy, or the mouse wheel only works when hovering over the center of the page.
- CSS Fails: Adding overflow-x:hidden to the body—the standard fix for white space—does absolutely nothing.
The Root Cause: The “Box Within a Box”
The issue is rarely a single element sticking out of your layout. Instead, it is a structural conflict between your Theme and your Browser.
Modern themes often wrap your content in a container ID like #inner-body, #wrapper, or .site-content to handle fancy page transitions or sticky headers. Sometimes, this inner container gets set to height: 100vh (100% of the viewport height) with its own overflow-y: scroll.
Simultaneously, your browser naturally adds a scrollbar to the main <html> or <body> tag.
The result? You have a scrolling box inside a scrolling page. The browser paints its own scrollbar, and the theme paints a second one next to it. Since the scrollbar track is transparent or white by default, it looks like a broken white gap on a dark website.
The Solution
To fix this, you don’t need to hide the scrollbar; you need to kill the inner scrollbar.
We need to force the theme’s inner wrappers to stop acting like scrollable boxes and just let the content flow naturally. This hands control back to the main browser window.
Add the following snippet to your WordPress Appearance > Customize > Additional CSS panel:
CSS
/*`FIX: KILL THE DOUBLE SCROLLBAR & WHITE SPACE`*/
`/* 1. Force the main browser window to handle the scrolling */
html, body {
overflow-y: auto !important; /* Enable natural browser scroll */
overflow-x: hidden !important; /* Prevent horizontal spillover */
height: auto !important; /* Let the page grow naturally */
min-height: 100vh; /* Ensure it fills the screen */
background-color: #000000; /* Safety net: paint background black */
}
/* 2. UNLOCK the inner containers */
/* This forces the theme wrappers to expand fully, removing their scrollbar */
#wrapper,
#inner-body,
.aux-page-container,
.site-content,
.elementor-section-wrap,
.elementor-page {
overflow-y: visible !important; /* SHOW content, don't SCROLL it */
overflow-x: visible !important;
height: auto !important; /* Stop limiting height to screen size */
max-height: none !important;
}`
Key Highlights:
1. `overflow-y: visible !important`: This commands the inner containers to display their content fully without clipping it or adding a scrollbar.
2. `height: auto !important`: This breaks the `100vh` height limit that was trapping the content inside a fixed-size box.
3. `background-color: #000000`: This is a final polish. If a tiny gap remains due to browser rendering, it will now be black (matching your site) instead of white.
Conclusion
It is easy to blame a rogue image or padding when you see white space on a site, but sometimes the culprit is the page structure itself. By “unlocking” the inner containers, you remove the double scrollbar, eliminate the white gap, and restore smooth, native scrolling to your website.
Save yourself some time, try above code and keep building.