Solved Section's 'Overflow-x:hidden' not working

Hi there, can anybody tell me why this is happening?

On this page https://vabs-clone.thewebsiteguardians.dev/ at the bottom, below the footer, there's a scroll bar, so the page can scroll to the left, revealing blank space. I assumed this is because of the two carousel sliders on the page. To control the potential overflow I have added 'overflow-x:hidden !important; to the Divi Theme Options Custom CSS for the html and body elements and also to the Custom CSS main element for both sections containing the carousels. Normally this would work, but it's it's not, and it's not working in any browser.

It's also happening at on this page (has a testimonials slider which also has overflow-x:hidden; added to the section. About Us - Vacuum & blowing solutions | VABS Ltd (thewebsiteguardians.dev)

It is not happening on this page, which only has the single slider Products New - Vacuum & blowing solutions | VABS Ltd (thewebsiteguardians.dev)

This page has the two sliders that the home page has, but it doesn't have the problem Font styling - Vacuum & blowing solutions | VABS Ltd (thewebsiteguardians.dev)

I have the same site setup on a local XAMPP server but the scrolling issue is not present. It's really baffling.

How do I stop the side scrolling? What's causing it? I've put controls on all of the elements that I thought might be creating the problem, but that's not really proving to me that this is what the problem is.

If anybody can see what's going on, I'd really appreciate it!

Cheers
Grant

 

Yep, that did it! Thanks. How does that work and overflow-x:hidden !important; doesn't? It's my normal, solve all problems go to solution, usually.

 

Further update to this, incase anybody is dealing with the same issue.

Although it wortked as far as gettign rid of the side scrolling action, this code ended up screwing up the Theme Builder for me (It was hiding most of the header).
#page-container {
overflow: hidden!important;
}

So I had to get rid of it.
On further inspection, the side scrolling behaviour was caused by the header section which I had given 'position:absolute' and selected the centre position in the module tool. Doing that assign attributes to the section css of left:50%; and transform:translateX(-50%)
Disabling the transform and changing left to left:auto; and adding right:auto; solved it.

So, solution was, reset the section in the sections module Advanced settings to position:default and added the absolute styles I wanted in the Custom CSS of Theme Options. This has worked and got rid of the scrolling issue.

Thanks to Pavel at Elegant Themes support for helping me solve this too!! Wouldn't have got there without his help.