How to set values ​​for max-width 768 and less with adaptive layout (it doesn't work for me for some reason)?

Question

Adaptive design

I am making my first site, so please do not swear strongly for the curvature and primitivism.
The bottom line is that after the values ​​​​for max-width 991 for all other resolutions, the changes do not work. But if I copy the lines for, for example, max-width 768 before max-width 991, then everything works fine. Where am I dumb?

Answer 1

With max-width from larger to smaller :

@media (max-width: 992px) {...}
@media (max-width: 768px) {...}

With min-width from smaller to larger:

@media (min-width: 768px) {...}
@media (min-width: 992px) {...}

Answer 2

OldKelt , Good afternoon.
Often

<meta name="viewport" content="width=device-width, initial-scale=1">

But it also happens

@media screen and (min-width: 320px) and (max-width: 768px) {
}