Shapes bleeding outside div

I have created an animated blurred background, and the shapes are bleeding outside of my div block.

Can anyone help me fix this, tried everything!

https://preview.webflow.com/preview/ryan-munro-design-a9f5f9?utm_medium=preview_link&utm_source=designer&utm_content=ryan-munro-design-a9f5f9&preview=b62a3957c44f274cc8b0e175b3760add&pageId=6599412834f8cfe53245f386&workflow=preview

Hi Ryan

Are you looking to contain the multi-colored background within the new-header container?

If so, you need to set the position of this container from static to relative. Right now, your circle divs are defaulting their position relative to the Body element, because there are no ancestor divs near it telling it what to do (all other nearby divs have their position set to static).

After updating the position of new-header to relative, toggle overflow: hidden to prevent/hide the circle divs from extending beyond the container.

I hope this helps!

You’ve only gone and done it Gabriella! Thank you so much!

1 Like