@ChrisP already tried overflow-x: hidden for both html, and body. Doesn’t seem to work for me.
The issue is with my pseudo elements .bottom::before and .bottom::after. They both have 100% widths and I think that’s what’s causing it. Because as soon as I disable the two elements I no longer have an overflow problem. Strange.
I’m seeing the same issue in Chrome, and I’m pretty sure I figured it out.
Because you’ve set positioning on your pseudo elements, their container needs positioning set in order for the child pseudo elements to obey overflow: hidden;. If you set position: relative; on the body tag, your overflow disappears.