Overflow-x: hidden causes vertical scrolling

Hey!

I'm working on a website, and I have two problems I'm trying to figure out:

1- I have a hero section where I position some decorative SVGs using position absolute, and I need them to overflow over the viewport, so I use overflow-x: hidden on the parent I end up with vertical scrolling on only the section, Why is this behavior happening?

2- the div .separator class has width: 100% and I applied a margin on it (all four sides) but it does not get applied on the right, why is that?

Here is the web page: https://644bfc6b0eba930d586dd80f--stirring-pastelito-35a5e1.netlify.app/

Thanks a lot

P.S: if I move the dive with .separator class inside the div with .hero class the vertical scrolling dissapears
Was this page helpful?