html body extends after make element a negative position

Question

Here is my site : SITE

Resize window until responsive design appears, and push "right" button on the top. The right sidebar disappear and appear, but when disappear, the bar take a position of left: -300px, and you can scroll to the right. Why would this happen ? With the left sidebar all OK. P.S. scroll with the middle mouse button

Answer 1

Add overflow-x:hidden; to:

@media screen and (max-width: 650px)
.content {

Leaving the final rule thus:

@media screen and (max-width: 650px)
.content {
   margin: 0 auto;
   width: 100%;
   overflow-x: hidden;
}