Body not wrapping content (not float or body,html 100% thing…)

Question

Why the hell isnt the body/html or .main div wrapping my .container div's, when browsers width is between 767-960 px?! this cause you to be able to scroll horizontally. im so confused, this should work!

All code i have is this:

html, body { 
width: 100%;
}

.container {
  .clearfix;
   margin: 0 auto;
}

@media (min-width: 767px) {

.page-header
{
    height: 180px;
}

.container {
    width: 960px;
}

}

Answer 1

Fixed this by adding this to the media-query:

html, body {
   min-width: 960px; // <= width of the .container
 }

If anyone could explain this (why the .container isnt pushing body to be 960px) id be glad!