why does a higher max-width in media queries overwrite a lower max-width?

Question

The width of my page is under 991px and still the 'max-width 1200px' is overwriting my 'max-width 991px' rule in css.

This is a screenshot of my devtools window :

This can be solved by putting '!important' behind the 'margin-top...' css rule. But still I want to know why this is the case.

Answer 1

you have to change the order of your media queries...

in your case, the smaler the max-width, the lower it should be in you css

because max-width: 1200px is also true and comes later, so it gets overridden (look at the line count! :) )