CSS Media Query min-width not working correctly

Question

I have a HTML like:

Answer 1

I used this HTML:

With a simpler media query declaration like this one:

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

It's working great here: http://jsbin.com/ubehoy/1

Debugging with Firefox Responsive Design View and dragging the resizer, it changes the input background color correctly when the width limits are reached.

Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.