媒体查询最小宽度1200像素不起作用

Question

I'm trying to understand how media queries work in css . I'm looking for a bootstrap file and copy .container @media queries to a blank css and add colors to see it in live action:

file.css:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color:green;
}

@media (min-width: 768px) {
    .container {width: 750px;background-color:red;}
}
@media (min-width: 992px) {
     .container {width: 970px;background-color:blue;}
}
@media (min-width: 1200px ) {
    .container {width: 1170px;background-color:red;}
}

index.html

<div class="container">Hello</div>

When i run it and resize the browser window, the div change colors but never changes to red (1200+ px).

Why is this happening?

EDIT :

In firefox works fine , problem apears in Chrome.

Answer 1

You can try to look and test your webpage on

TestSize

ScreenFly

Your code is working properly.