Why does a CSS rule inside a media query not apply?

Check three gates, in order: the media condition must match, the selector must match the element, and the declaration must win against competing declarations. A media query applies only when its media type matches and all its feature expressions are true. A width condition, for example, tests the browser viewport width—not necessarily the width of the element you are styling. If the condition does not match, the styles inside it do not apply. [S1]

Start by reading the condition literally. Compare a width threshold with the current viewport width, or check the relevant feature for a different kind of condition. Then inspect the element and selector before changing specificity or adding !important.

Reduce the test to one condition and one obvious declaration. For example, assuming the goal is to make a box blue when the viewport is at most 600 pixels wide:

@media (max-width: 600px) {
  .notice {
    color: blue;
  }
}

Check the actual viewport width and whether the box has the notice class. If the viewport is wider than 600 pixels, that condition is false, so this rule is not eligible to apply. If the condition becomes true only after resizing, that points toward the condition rather than the property value. This example illustrates the test; it does not establish how a particular page is configured.

Inspect the exact element you expect to change and compare it with the selector. In the example, .notice is the selector to check against the intended element. A selector that refers to a different element or does not match the intended one will not make that element a candidate for the declaration. [S2]

Also check that the declaration is inside the media block you intend to test. Temporarily simplify the example to the media block above, using the selector and property from your page. If that works, add back the surrounding CSS in small pieces to narrow down what changes the result.

Compare the competing declarations for the same element and property. The cascade filters declarations for selector match and relevant media conditions, then considers origin and importance, specificity, scoping proximity, and order of appearance. So a matching declaration inside a media query can still lose; source order decides only when the earlier cascade criteria tie. [S2]

A practical sequence is: identify the declaration that supplies the visible value; check whether each rule is eligible; then compare importance and specificity before relying on which rule appears later. Test one edit at a time, and remove temporary test styles afterward. Without the stylesheet and the exact element, it is not possible to identify which declaration wins on your page.