Why is my (Flexbox) container spilling over the right?

Design help Layout & Design
1

Container 16 and 17 are spilling over to the R making everything slightly off center in Tablet and smaller views (not really dead centered in Desktop either). The section above is not and I think it is setup the same. I’m sure I’m missing some simple setting somewhere. Only difference I can see is the good one is flexbox horizontal and the others are vertical. All are set to 100% width. What am i missing?

I tried making the X axis left and it didn’t seem to help. This is specific to the Coral page.

Here is my site Read-Only: LINK
(how to sharhttps://webflow.com/design/louiss-radical-project-d73ee4?utm_medium=project_link&utm_source=designer&utm_content=louiss-radical-project-d73ee4&workflow=comment&pageId=691033848057fa44cfb11960e your site Read-Only link)

2

@IPT The Read-Only link appears to be incorrect. Could you please attach the correct link

3

trying again…

https://webflow.com/design/louiss-radical-project-d73ee4?utm_medium=project_link&utm_source=designer&utm_content=louiss-radical-project-d73ee4&workflow=comment&pageId=691033848057fa44cfb11960

4

Screenshot 2025-11-11 at 2.46.06 AM
Screenshot 2025-11-11 at 2.46.06 AM2880×1668 206 KB

not working, attach correct link plz

5

Huh, it works when I post it in mine. I changed it to “anyone”.

6

Hopefully that works…..here is the live page:

7

Here is the “sandbox” link I copied…

8

Screenshot 2025-11-11 at 3.16.07 AM
Screenshot 2025-11-11 at 3.16.07 AM1920×1112 527 KB

On container16 with 100% width, you’ve added 2rem margin on both sides. Instead of using margin, it’s better to use 2rem padding on both sides of the container.

Element overflows its container:

  • A 100% width element already takes up the full width of its parent container.

  • Adding horizontal margins (left/right) effectively adds extra space outside the element.

  • This can cause the element to overflow the container, creating unwanted horizontal scrollbars.

9

Hey @IPT ,

To add-on to the above suggestion, if you need some space between the page and the Container 16 element, you can have padding instead of margin as follows:

AJ - Container 16
AJ - Container 161849×752 267 KB

And also make sure you reset the Width property of Div Block 30 element to get rid of extra space on the right side of the page as follows in the tablet breakpoint:

AJ - Div Block 30
AJ - Div Block 301849×817 290 KB

Hope this helps.

10

Thank you, I’ll look at that. I added the 2 REMs to try and pad it on each side. However, what made me notice it wasn’t centered was I need 6 on the right, and only 2 on the left to center it. I’d think the 2REMS would make it spill on both sides….oh, are ypu saying the 2 on the right pushed it off the left to begin with?

I’ll check it out - thanks for looking and providing some insight. Much appreciated!

11

@IPT , Using padding inside the container is usually the better approach, as it keeps the content centered while maintaining consistent spacing on both sides.

Glad I could help — If the issue has been resolved, please mark it as “Solution.” Thank you!

12

Sweet - that resolved it. Thanks. So when would you use a margin if at all?

13

@IPT

@IPT

  1. Separate elements from each other: Example: You want a paragraph to not stick directly to the heading above it.

  2. Push elements away from the edge of a container: Example: Centering a block element horizontally.
    div {
    width: 200px;
    margin: 0 auto; /* top/bottom = 0, left/right = auto */
    }