WordPress section won’t center: why your layout isn’t centering
I was building in Elementor on WordPress, trying to center a search bar for BetterDocs, and it would not move. I put it in an Elementor section. I tried a column with a fixed width. I added padding. I added center tags. None of it worked. I gave the element a custom CSS ID and tried styling that ID directly instead of working through Elementor’s classes. That didn’t work either. I sat there thinking: why the hell won’t it just center?
I don’t even remember what finally fixed it. That’s an honest answer, and also a very accurate description of how most CSS fixes end up going. Something eventually worked, the page moved on, and whatever trick I landed on dissolved back into the session. The frustration is what stayed. Hours on something that felt like it should take two minutes.
I’ve read a lot of explanations of this problem since then, and the thing most of them get wrong is that they weren’t written by someone with my stack. They worked for whoever wrote them, on whatever combination of theme and plugins that person was running. But I had about 12 plugins going, and BetterDocs generates its own CSS for its search bar, and Elementor generates its own CSS for the section containing it, and somewhere in that pile of competing rules, the thing that worked for someone else’s clean setup just didn’t apply. What works for a theoretical site and what works for your actual site are not always the same thing.
Here’s what was actually happening, and how to find it on your site.
Why the section won’t center: the ancestor problem
When you center a section in Elementor, Divi, or any other page builder, you’re setting an alignment property on that specific element. That instruction is real. WordPress applied it. The section is genuinely trying to center itself.
But centering works relative to the available space inside the parent container. If a parent element two or three levels up in the HTML has a fixed width, or an overflow setting that clips the layout, or a flexbox configuration that overrides child alignment, the section follows those rules instead. Your centering instruction gets applied and then immediately constrained by something higher up that has more authority over the layout.
The CSS cascade works from the outside in. A parent container’s width and layout rules define the space your section lives in before your section’s own rules do anything. That’s why changing the alignment setting on the section itself keeps not working: you’re editing the right thing in the wrong place.
When a plugin like BetterDocs generates its own CSS for a component, that CSS doesn’t know or care about your Elementor section’s alignment setting. It has its own rules for where its elements sit, and those rules may have higher specificity than anything you set in the page builder panel. You’re in a three-way conflict between your page builder, your plugin, and the theme underneath them, and the settings panel only shows you one of those three.
What the constraint usually is
In most cases, when a WordPress section won’t center, one of these three things is happening above it in the page structure.
A fixed pixel width on a parent container. Something is set to, say, 800px wide and aligned left, and your section fills that container. Centering the section centers it within the 800px box, not within the full page width. It looks left-aligned because the box it lives in is left-aligned.
A max-width with no margin auto. Some themes and page builders apply a max-width to content wrappers but don’t set the margins to auto, which is what actually centers a block-level element within its parent. The element is narrower than the page but flush left because nothing is pushing it to the middle.
A flexbox or grid parent that controls child placement. If a parent container uses flexbox or CSS grid, it controls where its children sit regardless of what those children have set on themselves. A flex container with justify-content: flex-start will push all its children to the left no matter what alignment settings the children have individually.
None of these constraints show up in your page builder’s settings panel for the section. They’re on different elements, often elements your page builder manages invisibly in the background, or elements your plugin injected without advertising it.
WordPress section won’t center: how to find which constraint is doing it
The diagnostic process is the same regardless of which page builder you’re using, because the constraint lives in the CSS, not in the page builder interface.
Open your browser’s developer tools on the page where the section won’t center. Right-click the section and choose Inspect. In the Styles panel, look at what’s controlling the width and the horizontal positioning. Then click up through the parent elements, one level at a time, and check their width and layout properties at each level. You’re looking for the first ancestor that has a fixed width, a left-aligned margin, or a flexbox parent property that’s overriding child placement.
When you find it, that’s the element to fix. Not the section.
If navigating the inspector panel feels like reading a foreign language, especially when you’ve got Elementor’s generated classes stacked on top of a plugin’s generated classes stacked on top of a theme stylesheet, Loupely Lens reads the full CSS cascade for you, including the ancestor chain, and tells you in real human terms which rule is constraining the layout and where it came from. The answer is almost always in the ancestor chain, not on the section itself.
The fix, once you’ve found the constraint
What you do next depends on where the constraint is and where it came from.
If it’s coming from your theme’s stylesheet, add a CSS override in your theme’s Custom CSS panel (Appearance, then Customize, then Additional CSS) that targets the parent container and adjusts its width or margin. A container set to a fixed width with no centering usually needs margin-left: auto; margin-right: auto; added, or the fixed width removed in favor of a percentage or max-width approach.
If it’s coming from your page builder’s own wrapper element, check whether the page builder has a section or column width setting that’s separate from the alignment setting. Elementor’s inner section width is controlled independently from the alignment of the content inside it. The setting you need might be one level up from where you’ve been looking.
If it’s coming from a plugin’s generated CSS, as it was in my case with BetterDocs, your options are more limited. Some plugins have their own styling settings that you can adjust directly. If they don’t, you’ll need to write a CSS override that targets the plugin’s specific element with enough specificity to beat the plugin’s own rule. That usually means using the element’s CSS ID rather than a class selector, and sometimes it means adding !important, which has its own risks. The post on CSS overrides not working covers how to find which rule is winning when your fix isn’t taking effect.
If it’s coming from an inline style applied by JavaScript, a regular CSS class selector won’t beat it. You’d need either !important or a more targeted fix from whoever wrote the script.
In all cases, confirm the fix works across viewport sizes. A constraint that appears at desktop width sometimes behaves differently at tablet and mobile breakpoints. And if you’re working in Elementor and your CSS changes aren’t applying at all on the live site, the post on Elementor CSS not applying covers the generated CSS regeneration issue that trips up most Elementor users trying to add custom overrides.
A note on text-align: center doing nothing
If you’ve been setting text alignment to center on a section and the section itself isn’t moving, that’s expected behavior. Text alignment controls where the text inside the element sits, not where the element sits within its parent. Centering a section means centering the container, which requires different CSS: margin: auto, flexbox centering on the parent, or grid placement. The two controls look similar in a page builder panel and do completely different things. If you’ve been toggling that setting and nothing’s changing position, this is why.
One last thing: if you’re searching for answers to this on Reddit, Google, Quora, Stack Exchange, or blog posts from five years ago, you’re not doing anything wrong. Most people searching this problem are doing exactly that. The old posts haven’t been updated, but CSS hasn’t changed much either, so sometimes the fix still applies. The problem is that the fix that worked on someone else’s clean install may not account for the three or four competing stylesheets your actual site is running. The constraint hiding your layout is almost always a few levels up from where it looks broken, and which level it’s on is specific to your stack.
The section that won’t center isn’t broken. Something above it has more authority over the layout. Find that element, fix the rule on it, and the section will do what you told it to do. Start in DevTools: right-click the stuck section, choose Inspect, then click upward through the parent elements one level at a time, checking the computed width and margin on each one. The constraining element will be the first ancestor that has a fixed width or a missing margin: auto.
