Media queries ведут себя как-то странно, почему так?

Друзья, почему медиа запросы ведут себя как-то странно, либо я чего-то недопонимаю. Помогите разобраться, пожалуйста!

ПЕРВАЯ ситуация следующая.

background-color: red;
@media (max-width: 1630px) {
    background-color: green;
}
@media (max-width: 1024px) {
    background-color: blue;
}
@media (max-width: 992px) {
    background-color: yellow;
}
@media (max-width: 768px) {
    background-color: aqua;
}

Проблема в том, что background-color: green применяется на 1629px, хотя ведь ДОЛЖЕН 1630px. ПОЧЕМУ ТАК?? Ведь ОСТАЛЬНЫЕ применяются КАК И ПОЛОЖЕНО, т.е. background-color: blue применяется на 1024px, а не на 1023px и остальные, которые меньше тоже применяются на указанных брекпоинтах, а не ниже на 1px.
Почему какие-то брекпоинты применяются как и указано, а какие-то применяются когда окно меньше на 1px указанного?

ВТОРАЯ ситуация следующая.

background-color: red;
@media (max-width: 1629px) {
    background-color: green;
}
@media (max-width: 1023px) {
    background-color: blue;
}
@media (max-width: 991px) {
    background-color: yellow;
}
@media (max-width: 767px) {
    background-color: aqua;
}

Тут происходит следующее:
media (max-width: 1629px) применяется на 1628px,
media (max-width: 1023px) применяется на 1022px,
media (max-width: 991px) применяется на 990px и т.д.
т.е. теперь КАЖДЫЙ брекпоинт применяется на 1px меньше указанного.

Все становится еще интересней. Допустим, я хочу чтобы положенный брекпоинт media (max-width: 1023px) применился именно на 1023px, и раз он срабатывает на 1px ниже указанного, то логично, что можно добавить +1px и он применится как и задумано, пробуем:

@media (max-width: 1024px) {
    background-color: blue;
}

и тут, ВНИМАНИЕ, он начинает применяться уже именно на 1024px, а не меньше на 1px. ЧТО???

Что вообще происходит и почему так? Как с этим бороться?
Буду очень благодарен за ответ!!!