Margin coming from...nowhere?

I’m converting another Wordpress(Elementor) site to Webflow, and I’ve got right and left margins on a couple of Sections, and I have no idea where they are coming from. The Sections and all child Divs have 0 margins set, yet the 2 sections have a ~300px margin on the right and left. I would like to have the margins set to 200px, but until I figure out where the 300px margins are coming from, I’m stuck.

The sections are ‘Spit Section’ and ‘FMGGUM Section’ on the ‘Plays’ page.

https://preview.webflow.com/preview/clarinda-ross?utm_medium=preview_link&utm_source=designer&utm_content=clarinda-ross&preview=dca2481a80c97dc0bdf1f85ee9560e9d&pageId=5fc90bf2f43e2520a2eef489&mode=preview

I’m not seeing margins on my end, are you finding this when inspecting the site by chance?

There are “Auto” margins that are applied to the internal Container children elements (these keep the sections center aligned) however they will change size based on the viewport size and max-width of your containers themselves—is this what you’re talking about?

If so, you may want to read up a bit on how Container Elements work in Webflow, but the short answer is that these default to a max-width of 940px and apply some styles automatically to help with formatting:

image

They are essentially just fancy div blocks, so you can either create them yourself manually or modify the max-width property by adding an amount above 940px to “shrink” the space on the left and the right sides.

Let me know if that helps or if you’re noticing something else on your end.

For that very reason(the default max-width), I never use ‘Container’ elements, only ‘Div’ elements(unless they happen to be part of a Layout that I pull in). These two sections are not Container elements, they are indeed ‘Section’ elements with zero margins applied. I use the same technique on the Home page(Sections with 200px margins set), and they actually display at 200px. The Section elements in question have no Margins set, yet display with a margin of 300px on each side, as your screenshot shows.

And, having just said that, I realized that the internal box is a ‘Container’ element that is brought in with the ‘Hero’ Layout that I used. Silly me.

1 Like

No worries! I’m the same way, I never use containers (unless it’s a very quick mockup of something or while recording walkthrough videos) and opt to use divs instead.

Hopefully that helped fix your issue—if so, please go ahead and mark my reply as the Solution so other users know your question has been answered :+1:

Hopefully that