Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Why a “White” Section Still Shows Black on Both Sides

Field Note #133
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You built a page section with a clean white background. You paste it into a Custom HTML block, publish, and load the page — and there it is: black bars running down both sides of your white content, like the page never got the memo.
The instinct is to go hunting through your CSS for a rogue background rule. That’s not where the bug is.

What’s actually happening
Modern block themes (Full Site Editing / FSE themes like fotawp) often set the site’s background color as an inline style attribute directly on <body> — something like <body style=”background-color: #0c0d0e;”> — rather than through a normal stylesheet rule.
Inline styles beat any CSS selector, no matter how specific, short of !important. So a body { background: white; } rule sitting in your pasted <style> tag loses that fight every time, regardless of what order things load in. Your content’s own white background only ever covers its own centered content column — outside that column, the theme’s real (dark) body background is still showing through, because you never actually managed to change it.

How to tell the difference
Right-click the black area itself → Inspect. If the <body> element in the Elements panel has a style=”…” attribute with a background color baked directly into the tag (not listed under a class in the Styles panel), that’s the tell. You’re not fighting a stylesheet — you’re fighting an inline style that no ordinary CSS rule can beat.

The fix
Don’t try to recolor body at all. Instead, paint your own background in front of it:
Wrap your content in a full-bleed container that breaks out to the full viewport width, regardless of the theme’s normal content column:.my-fullbleed { width: 100vw; margin-left: calc(50% – 50vw); margin-right: calc(50% – 50vw); }
Give that same wrapper your intended background color.
Set the Custom HTML block (or its parent Group) to Full Width alignment in the block editor — the full-bleed trick needs room to actually expand into, and a block still constrained to the theme’s normal content width will just get clipped instead of stretching.

How to avoid it next time
Any time a Custom HTML block needs a background color different from the rest of the site, assume the theme is doing something with body you can’t out-cascade — and reach for the full-bleed wrapper trick from the start, rather than debugging a body{} rule that was never going to win.

Tagged in :

More from the field