DISABLE the Horizontal Scroll [closed]

Ok for some reason my webpage scrolls from left to right and shows a lot of ugly space.

I have searched for results but they just made the scrollbar HIDDEN

That's now what I want, I want to physically DISABLE the horizontal scroll feature. I do not want the user to be able to scroll left to right on my page just up and down!

I have tried: overflow-x:hidden in css on my html tag but it only made the scrollbar hidden and did not disable the scroll.

Please help me!

Here is a link to the page: http://www.green-panda.com/usd309bands/ (Broken link)

This might give you a better idea of what I am talking about:

This is when the first pages loads:

And this is after I scroll to the right:

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.

this is the nasty child of your code :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

replace it with

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

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 :]