⛔ 🐞 Left and Right Container padding not being properly applied to top-level boxed containers

[micmiller-apptio]

Prerequisites

• [ ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [X] The issue still exists against the latest stable version of Elementor.

Description

I've seen other issues reported with container padding, but nothing as simple as this case.

When I set padding for Boxed top-level containers, only the top and bottom values are being applied on the front end. The left and right values are being applied at a DOM level above and rendered irrelevant by the sizing of a boxed container.

Steps to reproduce

1. Create a new page
2. Drop a container on it
3. Set the Content width to "Boxed"
4. Add a Heading widget to the container
5. Set the Container padding to something in the Advanced tab (I used 60px, 40px, 60px, 40px)
6. Save the page and open it on the front end

The left and right padding values (padding-inline-end, padding-inline-start) within the boxed container (e-con-inner) are 0 instead of the set values. Those values are applied to the outer e-con element so they have no effect when the screen is wider than the size of the boxed content.

Isolating the problem

• [ ] This bug happens with only Elementor plugin active (and Elementor Pro).
• [X] This bug happens with a Blank WordPress theme active (Hello theme).
• [X] I can reproduce this bug consistently following the steps above.

System Info

Click to reveal

````txt == Server Environment == Operating System: Linux Software: nginx/1.25.2 MySQL version: MariaDB Server v10.4.25 PHP Version: 7.4.33 PHP Memory Limit: 1024M PHP Max Input Vars: 10000 PHP Max Post Size: 100M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 6.3.1 Site URL: https://sandbox2-apptio-com.pantheonsite.io Home URL: https://sandbox2-apptio-com.pantheonsite.io WP Multisite: No Max Upload Size: 100 MB Memory limit: 512M Max Memory limit: 1024M Permalink Structure: /blog/%postname%/ Language: en-US Timezone: America/Los_Angeles Debug Mode: Active == Theme == Name: Hello Elementor Child Version: 1.0.1 Author: Elementor Team Child Theme: Yes Parent Theme Name: Hello Elementor Parent Theme Version: 2.8.1 Parent Theme Author: Elementor Team == User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 == Active Plugins == Classic Editor Version: 1.6.3 Author: WordPress Contributors Elementor Version: 3.16.4 Author: Elementor.com Elementor Pro Version: 3.16.2 Author: Elementor.com Native PHP Sessions for WordPress Version: 1.3.6 Author: Pantheon Object Cache Pro Version: 1.19.0 Author: Rhubarb Group Pantheon Advanced Page Cache Version: 1.4.1 Author: Pantheon Pantheon HUD Version: 0.4.3 Author: Pantheon WP Crontrol Version: 1.15.3 Author: John Blackbourn & crontributors WPS Hide Login Version: 1.9.9 Author: WPServeur, NicolasKulka, wpformation == Must-Use Plugins == Apptio Custom Security Headers Version: 1.0 Author: Apptio Elementor Safe Mode Version: 1.0.0 Author: Elementor.com Pantheon MU Plugin Loader Version: 1.0 Author: Pantheon Systems == Elements Usage == archive : 21 button : 1 heading : -8 image : 1 loop-carousel : 1 loop-grid : 19 table-of-contents : 1 template : 1 wpgb-facet : -3 footer : 30 button : 1 divider : 1 heading : 2 image : 3 menu-anchor : 1 social-icons : 1 template : 2 text-editor : 4 ucaddon_marketo_form_cloudability_trial : 1 wp-widget-nav_menu : 1 header : 18 button : 2 heading : 1 html : 1 icon-list : 2 image : 2 nav-menu : 3 tp-navigation-menu : 1 ucaddon_plus_mega_menu_patch : 1 wpml-language-switcher : 1 section : 563 button : 5 dyncontel-acf : 19 gallery : 1 heading : -105 html : 2 icon-box : 6 image : 23 image-box : 3 loop-grid : 3 menu-anchor : 1 spacer : 3 testimonial : 12 text-editor : -5 ucaddon_marketo_form_contact : 1 single : 13 button : 2 dce-dynamicposts-v2 : 2 html : 1 image : 1 post-info : 3 spacer : 5 table-of-contents : 1 template : 1 text-editor : 1 theme-post-content : 1 theme-post-title : 1 ucaddon_wistia_player : 1 wp-post : 0 heading : 4 icon-list : 12 text-editor : 1 wp-page : 612 accordion : 1 animated-headline : 6 blockquote : 9 button : -57 call-to-action : 8 column_chart : 9 container : 1 counter : 3 counter_chart : 4 dce-dynamicposts-v2 : 3 dce_pdf_button : 3 donut_chart : 10 gallery : 1 google_maps : 2 heading : -21 heatmap_chart : 2 html : 11 icon : -13 icon-box : 6 icon-list : -7 image : -157 image-box : 3 image-carousel : -2 loop-carousel : 3 loop-grid : 77 lottie : 2 menu-anchor : 9 parent-child-menu : 1 post-info : 1 posts : -140 spacer : 3 table-of-contents : 1 template : 8 testimonial : 13 text-editor : 31 theme-post-title : 1 tp-animated-service-boxes : 2 tp-blockquote : 4 tp-button : 3 tp-carousel-anything : 14 tp-chart : 2 tp-hotspot : 4 tp-info-box : 2 tp-morphing-layouts : 1 tp-off-canvas : -9 tp-process-steps : 4 tp-progress-bar : 6 tp-row-background : 1 tp-shape-divider : 7 tp-style-list : 0 tp-switcher : 1 tp-table : -4 tp-tabs-tours : -8 tp-timeline : 2 ucaddon_gartner_peer_insights : 1 ucaddon_pathfactory_embed : 2 ucaddon_wistia_player : 1 wpgb-facet : 14 single-post : 12 dce-acf-repeater-v2 : 8 dce-tokens : 8 google_maps : 2 heading : 20 html : 2 spacer : 6 template : 4 text-editor : 4 ucaddon_local_event_time_all_display : 2 ucaddon_local_event_time_helper_function : 2 ucaddon_local_event_time_page_display : 2 ucaddon_marketo_form_events_post : 2 ucaddon_pathfactory_embed : 2 loop-item : 37 button : 20 dce-acf-repeater-v2 : 3 dce-tokens : 4 divider : 1 dyncontel-modalwindow : 4 heading : 31 icon-list : 3 image : 11 post-info : 22 spacer : 15 text-editor : 27 theme-post-title : 20 ucaddon_contact_email_field : 1 ucaddon_contact_phone_field : 1 ucaddon_course_loop_popup_button : 1 ucaddon_custom_post_title : 1 ucaddon_episode_card_icon : 7 ucaddon_episode_card_image : 4 ucaddon_local_event_time_tile_display : 3 == Settings == cpt_support: page disable_color_schemes: yes disable_typography_schemes: yes allow_tracking: yes unfiltered_files_upload: 1 load_fa4_shim: yes == Features == Custom Fonts: 2 Custom Icons: 0 == Integrations == == Elementor Experiments == Optimized DOM Output: Active by default Improved Asset Loading: Active by default Improved CSS Loading: Inactive by default Inline Font Icons: Inactive by default Additional Custom Breakpoints: Active by default admin_menu_rearrangement: Inactive by default Flexbox Container: Active Upgrade Swiper Library: Inactive by default Grid Container: Inactive by default Default to New Theme Builder: Inactive Hello Theme Header & Footer: Inactive by default Editor Top Bar: Inactive by default Landing Pages: Active by default Nested Elements: Inactive by default Lazy Load Background Images: Inactive by default Global Style Guide: Inactive by default Page Transitions: Active by default Notes: Active by default Form Submissions: Inactive Scroll Snap: Active by default Menu: Inactive by default Taxonomy Filter: Inactive by default == Elementor - Compatibility Tag == Elementor Pro: Compatible == Elementor Pro - Compatibility Tag == ````

[nicholaszein]

Hello @micmiller-apptio,

Thank you for reaching out! 🙏

⛔ While reviewing your report we concluded this is not an issue caused by Elementor. Here's what we found out:

That's the expected behavior for padding in Boxed Containers. The padding and margin will always be applied to the Container itself, not the inner Container. This was made on purpose. When the viewport gets smaller than the boxed content, you still have padding and margin around the content, but as the viewport width grows wider, it maintains all content aligned correctly.

✅ What you can do to solve your issue:

• Add another Container inside a boxed Container, set its Content Width to Full width, and set your padding there. or...
• Set your top-level Container to Content Width to Full width, change the Direction to Column, align and justify the content to Center. Then add another Full Width Container inside, and set the width as you'd prefer for the boxed content. Then add your padding as needed. It will be the same effect, but without the .e-con-inner wrapper inside.

👍 For now, that's all we can help with.

If you think this is still an issue caused by Elementor after following the troubleshooting steps above, feel free to open a new 🐞 Bug Report.

⚠️ Note that GitHub issues are reserved for Elementor 🐞 Bug Reports only, and should not be used for support.

❔ If you have questions, or need guidance, help, or general support, please use one of the following channels:

• Elementor Global Community The main Facebook group where all kinds of users come together to help each other.
• Elementor Academy Learn everything you need to know about using Elementor.
• Elementor Developers Documentation Learn everything about our Developer-API.
• Free Support Forum Get help on WordPress.org.

💎 If you have an active Elementor Pro license you are entitled to personal support, please see your purchase email or visit your Elementor Account page for details.

Kind regards