How do I fix this grid?


This is my first website design project using Webflow.
I was wondering how to get my grid element to not overflow beyond the section it’s in so that everything in it transforms easily?


It looks right in 1073 px, 100% but…it’s going to be a problem if that’s the only ratio that works lol…unless that’s something I can lock for desktops at least? I don’t know.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @A_L and welcome to Webflow,

The issue you are experiencing is due to the px set on your grid spacers:

Personally, I always delete all spacers, then in my margins set them as a %. This will make sure they stay on the page responsively. In your case, you would add the margin to your “Staff id picture”

Hope this helps.

1 Like


Thank you! How do I set it as a percent? I’m not seeing the option in my version of Webflow.

Hey Amanda,

You cannot set the gaps as a % which is why I recommend deleting them. Instead set your div margins as %. You can do this one of 2 ways




Additionally, make sure you use a good naming convention for your elements. This will save a lot of frustrations moving forward when/if you get into animations.

Hope this helps! Feel free to ask any more questions!