DISABLE the Horizontal Scroll

Try adding this to your CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

So to fix this properly, I did what others here did and used css to get hide the horizontal toolbar:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Then in js, I created an event listener to look for scrolling, and counteracted the users attempted horizontal scroll.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

I saw somebody do something similar, but apparently that didn't work. This however is working perfectly fine for me.

I know it's too late, but there is an approach in javascript that can help you detect witch html element is causing the horizontal overflow -> scrollbar to appear

Here is a link to the post on CSS Tricks

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

it Might return something like this:

<div class="div-with-extra-width">...</div>

then you just remove the extra width from the div or set it's max-width:100%

Hope this helps!

It fixed the problem for me :]