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
6 Replies
Zoë
Zoë2y ago
The contact me button make it display:inline-block; to stop the vertical scrolling inside the hero The .seperator should have the width:100% removed, as it's causing horizontal scrolling with the margin it has extra
Taro
Taro2y ago
But why is that? I have not set a height on .hero so the height should be determined by the content inside it. for the .separator should width: 100% be 100% of the parent?
Zoë
Zoë2y ago
Because the <a> is an implicit display:inline and as such the padding does not grow the hero, it makes it scroll The seperator is overflowing because the width is 100% plus the 2rem margin making it 100%+4rem wide. <div> is a blocked element so it already takes up as much width as it can and the width is unnecessary (if you did want the width and the margin you can use width: calc(100% - 4rem))
Taro
Taro2y ago
ah, totally makes sense, thanks @zed_dash
Zoë
Zoë2y ago
No problem, glad to have helped 😊
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server