Elementor Sections Always 20px Narrower Than the Figma Design? Containers Ship a Default `padding: 10px`

I was rebuilding a Figma design in Elementor — a campaign page for a client, all flexbox containers, clean measured spacing in the design file. But every section I built came out subtly narrower than it should be. Content maxed out at 1180px where Figma said 1200px. Inner elements sat a hair off on both sides — too small to spot at a glance, too consistent to ignore.

My first instinct was a bad one: I "fixed" it by fudging numbers. Bumped the content width a little, rounded element widths up, threw in the occasional negative margin. Every patch fixed one section and broke another. After half an hour of that tug-of-war, I stopped guessing and opened DevTools. I inspected the container element — the .e-con class — and looked at its computed box model:

const container = document.querySelector('.e-con');
const styles = getComputedStyle(container);
console.log(styles.paddingLeft, styles.paddingRight); // "10px" "10px"

There it was. padding: 10px left and right — padding I never set, on a container I had just created empty.

Why this happens

Elementor's Container element ships with a default 10px padding on every container you create. The value is defined globally in Site Settings → Layout, under the container padding option — and it applies to every new container without ever showing up in the element panel as something "you" filled in. Which means every container silently eats 20px of horizontal space: 10px left, 10px right.

Because it is a default — not something I entered — it never occurred to me to look for it. I audited my own values over and over and they were all correct. And on the design side, Figma frames have no such implicit padding: a 1200px frame means content really can touch 1200px. So every design-to-build measurement drifts by exactly 20px per container level. The math:

/* what the design says */
.design-frame {
  max-width: 1200px; /* content can touch the full 1200px */
}
 
/* what Elementor actually renders */
.e-con {
  max-width: 1200px;
  padding: 10px; /* silent default from Site Settings -> Layout */
  /* usable content width: 1200 - 20 = 1180px */
}

Not a bug, not a miscalculation on my end. Just two tools with different assumptions about what "1200px wide" means.

The fix

There are two levels to the fix, and I use both.

First, for pixel-critical layout shells: explicitly set the container padding to 0 and control the spacing yourself. Real padding goes only where the design actually has padding — not inherited silently from a default.

Second, and this is the proper one: change the default at the source. Open Site Settings → Layout, find the default container padding, set it to 0. From then on every new container is born neutral, and every bit of padding on the page is padding I set deliberately to match the design. One change per project, done.

For pages built before I caught on, I audit from the console — find every container still carrying horizontal padding:

document.querySelectorAll('.e-con').forEach((el) => {
  const styles = getComputedStyle(el);
  if (styles.paddingLeft !== '0px' || styles.paddingRight !== '0px') {
    console.log(el, styles.paddingLeft, styles.paddingRight);
  }
});

Every line that shows up is 20px that has to be accounted for: kept because the design really calls for it, or zeroed out.

The bonus gotcha: nested containers multiply the drift

One more thing worth recording: this default stacks. A container inside a container means 20px plus 20px — the innermost content is already 40px narrower than its Figma frame. That explains why my early patches felt random: sections with different nesting depths drifted by different amounts, so a "correction" that worked on one section was guaranteed wrong on another. Once the default was zeroed, all of those corrections had to be ripped back out one by one.

The takeaway

Page builders have opinions, and the opinions ship as defaults. My checklist before pixel-matching any design now:

• Audit the builder's defaults first — padding, gaps, breakpoints — before blaming your own numbers.
• Measure with computed styles in DevTools, not by eye. Eyes will tolerate 20px; the box model does not lie.
• When a layout is consistently off by a fixed amount, it is almost certainly a default, not a mistake in your values. Wrong values drift randomly; defaults drift uniformly.
• Set your page builder's defaults to neutral once at the start of every project, then add spacing deliberately, following the design.

Since then, the first thing I open on a new Elementor project is not the page — it is Site Settings.