overflow-x:hidden still can scroll

I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.

html {
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  width: 950px;
}
.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}

<div>
  <div class="full">
    abc
  </div>
</div>

There is another way to fix this issue with one line of code:

body {
    /* All your regular code including overflow-x: hidden; */
    position:relative;
}

This solved my issues on webkit (Mac)

Reference: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

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

Solved the issue for me, except for IE - you can still drag the site to the right if you make an effort to do so.

Using overflow: hidden; removes the vertical scrollbar, so this isn't a solution.

I couldn't manage to find a better solution using JavaScript.