A common design pattern is a fullwidth section where the background stretches edge to edge, but the content aligns to one side of the page container — not the full screen width. This is tricky because standard padding removes the edge-to-edge effect.

The Technique

Create a fullwidth 2-column section. Set all padding and margins to 0. Then apply a custom left padding to the left column using calc():

padding-left: calc(50% - 640px);

How the Math Works

50% is half the screen width. 640px is half your max container width (e.g. 1280px container). The difference is exactly the space between the screen edge and the container edge — so the content aligns perfectly with your container on any screen size.

Adjust 640px to match half of your site max-width:

/* Container 1200px wide */
padding-left: calc(50% - 600px);

/* Container 1400px wide */
padding-left: calc(50% - 700px);

Step-by-Step in Breakdance

• Add a fullwidth Section
• Inside, add a 2-column Columns element
• Set all padding to 0
• On the left column set Padding Left to calc(50% - 640px)

Pro Tips

• Use max(1rem, calc(50% - 640px)) to prevent negative padding on very small screens.
• Apply the same logic to the right column for a mirrored layout.
• Works in Elementor, Breakdance, and plain CSS equally well.