Issue with overflow on mobile version 7.1

Site URL: https://papaya-plums-lrzm.squarespace.com/

Hello, 

I'm having an issue with 'overflow' on my website's mobile version. 

Here is the site: 
https://papaya-plums-lrzm.squarespace.com/
password: lucyinthesky

When I view on mobile, there is a white margin on the right hand side of the page, when I zoom out, and then I can't zoom back in, it messes up how the site is viewed on mobile. So I think there is some overflow I need to fix?
 

I tried adding: 
/** Page Hide Overflow **/
html, body {
    overflow-x: hidden!important;
}

However, that seems to cause other issues with the mobile where it's breaking the scroll. So don't think it's an option. 

Any ideas - I've tried to localise the code that's causing the overflow in the first place, but having trouble doing this. 

Thank you

Quote

Any ideas - I've tried to localise the code that's causing the overflow in the first place, but having trouble doing this. 

What custom coding are you using? Does the white margin appear if you temporarily remove it all? 

Thanks for your reply Ziggy. 

I am using a fair bit of custom CSS as well as some header / footer injections. You're right, when I remove all the custom CSS, the issue (white margin) doesn't appear, so I guess there is an error in my CSS somewhere. 

I guess i will add the CSS in bit by bit and see if i can localise the issue - unless you have a better suggestion for doing this? Thank you 🙂

Ok! I think I've fixed it, there was some rouge code on the newsletter block, but I managed to isolate it by adding in my custom css bit by bit.