Problem with Grid going out the page

[Mingxi_Li (Max Li)]

So I’ve set a 12 column grid in my cms page, which looks fine in large canvas:

However, when I shrink the page, it starts to go out of the viewport:

But here is the confusing thing: I have two grids, when I click “EDIT GRID” on the first one, I noticed that the second grid below works perfectly fine as I wish:

But once I leave the EDIT mode, the two grids again jump out of the page.

So basically my question is, how can I make sure the items don’t go out of page, just as how the second grid works in the last image.

Thank you!

---

Here is my site Read-Only:
https://preview.webflow.com/preview/maxlidesign?utm_medium=preview_link&utm_source=designer&utm_content=maxlidesign&preview=bcb4033e99e11e659e1ad3fd395b3cf0&pageId=61cd49aa961ff827f95d15dc&itemId=61cd4c36e6b4859eb4f35306&workflow=preview

[JimF (Jim Forbes)]

This is a shot of the Mobile Portrait width - Other sizes have similar issues.

The entire page has layout problems - Note the overlaying text and the combined width of the images being wider than the container.
I’d suggest starting with the Desktop view (WF preference), get it laid correctly, then proceed to the other sizes and lay they out correctly.
Messing with the layout of themes, and especially templates, takes patience and finesse!

[Mingxi_Li (Max Li)]

Hi, thanks for your suggestion!

However I haven’t worked on the mobile version yet and my question is currently only about the desktop size. Can you please explain why the combined width of the images is wider than the container when the last image shows that the elements in the second grid can theoretically be smaller and fit the page? (in desktop mode, I understand mobile is another situation) and also what specifically do you mean by get it laid correctly? How can I do the layout in the right way? Thank you!

[JimF (Jim Forbes)]

I see NO difference between edit mode and preview mode when in Desktop view!