Ultimate Guide to Fixing White Margins in Elementor Full-Width Layout (WoodMart Theme)

Why Does Elementor Full-Width Layout Have Left and Right White Margins?

When using the WoodMart theme with Elementor to build pages, many developers encounter this frustrating issue: even after setting the Container to Full Width in Elementor and enabling Stretch Container, obvious white margins still appear on the left and right sides of the page.

This article will fully walk through the troubleshooting process and provide a verified fix for the Elementor Full-Width white margin issue.

Problem Symptoms and Initial Investigation

The page behaves as follows:

• Elementor Container has Content Width set to Full Width
• Stretch Container is enabled
• Creating a new Container for testing still shows white margins
• The white margin width is approximately 15px (one on each side)

The most obvious assumption is a setting issue within Elementor itself, but after checking each possibility:

• Elementor Full Width setting ✅ Correctly configured
• Section / Container Padding ✅ Both set to 0
• Testing with a new blank Container ✅ Issue still reproduces

Conclusion: The problem is not in Elementor, but in the theme's outer container.

Using Browser Developer Tools to Pinpoint the Root Cause

Open the browser F12 Developer Tools, run the following script in the Console to check the actual width of each container layer by layer:

var check = ['wd-page-wrapper','website-wrapper','main-page-wrapper','wd-page-content','elementor'];
check.forEach(function(cls) {
var el = document.querySelector('.' + cls);
if(el) {
var s = window.getComputedStyle(el);
console.log('.' + cls, '| width:', s.width, '| padding-left:', s.paddingLeft, '| padding-right:', s.paddingRight);
}
});

It was found that .elementor is only 1092px, which is 45px narrower than its parent container. Further inspection of the parent element of .elementor:

The results reveal the truth:

Root cause found: .container.wd-entry-content inherits Bootstrap's default padding: 0 15px, preventing the inner Elementor container from truly spanning the full width. This is entirely unrelated to Elementor's settings and is caused by the WoodMart theme's underlying Bootstrap styles.

Fix: Override in Child Theme CSS

The correct fix is to add the following CSS to the woodmart-child theme's style.css, rather than modifying the theme itself (otherwise, changes will be lost on theme update):

Add the above code to: /wp-content/themes/woodmart-child/style.css

Or, paste and save it directly in the WordPress admin under Appearance → Customize → Additional CSS.

Fix Not Working After Deploying Online? Check Cloudflare Cache

After successfully testing the fix locally, uploading it to the live server might still show the white margins. The Console confirms the child theme CSS file loads correctly, but the padding remains 15px.

Reason: Cloudflare or another CDN is caching the old version of the CSS file.

Solution:

1. Log in to the Cloudflare dashboard
2. Go to the relevant domain → Caching → Configuration
3. Click Purge Everything
4. Refresh the website; the white margins should disappear

If using other CDNs or server-side caching (e.g., LiteSpeed, Nginx FastCGI), you must clear the corresponding cache as well.

Reference HTML Structure

The actual DOM hierarchy for a WoodMart + Elementor page is as follows:

Elementor only controls the innermost Container. The outer .container.wd-entry-content is injected by the WoodMart theme, and Bootstrap gives it a default padding of 15px on each side, which is the source of the white margins. For more information on WordPress theme development best practices, refer to the Google Webmaster Guidelines.

FAQ

Elementor full width is set but there are still white margins, what should I do?

White margins are usually not an Elementor issue but are caused by padding or max-width restrictions on the theme's outer container. Use F12 Developer Tools to inspect the parent element of the .elementor element, find the container with padding, and override it to 0 using !important in your child theme CSS.

I modified style.css but the live website hasn't changed?

The most common reason is that Cloudflare or another CDN is caching the old CSS file. Log in to the Cloudflare dashboard, perform a Purge Everything to clear the entire site cache, and then force refresh your browser (Ctrl+Shift+R) for the changes to take effect.

Why use a child theme instead of directly modifying the WoodMart theme's CSS?

Directly modifying theme files will cause your customizations to be lost when the theme is updated. Using a child theme's (woodmart-child) style.css is the WordPress-recommended best practice, ensuring theme updates do not affect your custom styles.

Will this method affect the layout of other pages?

No. The .container.wd-entry-content selector only targets the content area edited by Elementor. It does not affect WooCommerce shop pages, sidebars, headers, footers, etc.

Will I need to reapply the fix after a WoodMart theme update?

No. The fix code is placed in the child theme, and theme updates do not affect child theme files. You only need to re-add it if the child theme itself is overwritten; normal WoodMart theme updates will not touch the child theme.