Horizontal Scroll when Navigation menu translates webpage with overflow-hidden

Question

I'm currently working on my very first personal page! I'm getting horizontal scroll on smaller media queries where I shouldn't and I cant track down the culprit. All containers are set to 100% width and have their overflow-x hidden. Once the page reaches 1200px in width the side navigation collapses, however once you toggle the 'hamburger' the menu should slide out and push the contents of the main section out and hide the overflow until an anchor point is selected in the menu. At which point the page should shift back to where it was and scroll to the desired section. Something I didnt notice until I turned on touch simulation in the dev tools is that its completely busted on mobile with touch, however working fine with browser scroll in mobile view.

If anyone has any thoughts please let me know, you can find my site here: https://imaleks.dev/

Sorry in advance if this breaks any ettiquite new to all this.

Answer 1

I think, when all you containers are width: 100% + translateX(290px);, and this is more then 100%. You should toggle some class to a body with overflow-x: hidden; when the mobile menu is active.

Or you can keep overflow-x: hidden; for body permanent. This will completely disable horizontal scroll.