Media Queries firing at wrong width

Question

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

@media screen and (max-width: 1200px) {
 .logo-p         


        

Answer 1

Another addition. After an hour of debugging I realized I had coded multiple media queries and because css files are executed from top to bottom, I was overriding previous media query logic. Ex:

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};