Media queries behave in a strange way, why is that?

Question

css

Friends, why do media queries behave in a strange way, or I misunderstand something. Help to understand, please!
The FIRST situation is as follows.

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;
}

The problem is that background-color: green is applied at 1629px when it SHOULD be 1630px. WHY IS THAT?? After all, the REST are applied AS SHOULD be, i.e. background-color: blue is applied at 1024px , not 1023px and the others that are smaller are also applied at the specified breakpoints, not 1px below.
Why are some breakpoints applied as specified, while others are applied when the window is 1px smaller than specified?
The SECOND situation is as follows.

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;
}

Here's what happens:
media (max-width: 1629px) is applied at 1628px,
media (max-width: 1023px) is applied at 1022px,
media (max-width: 991px) is applied at 990px, and so on.
those. now EACH breakpoint is applied 1px less than specified.
Everything becomes even more interesting. Let's say I want the set media breakpoint (max-width: 1023px) to be applied exactly at 1023px, and since it fires 1px below the specified one, it is logical that we can add +1px and it will be applied as intended, try:

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

and here, ATTENTION, it starts to be applied exactly at 1024px, and not less than 1px. WHAT???
What is actually happening and why is it so? How to deal with it?
I will be very grateful for the answer!

Answer 1

There are tales on the Internet about the formation of a gap of 1px between breakpoints, if both the max-width and min-width rules are applied for a given screen width and when the browser screen scaling is different from 100%. Check if you have a similar situation. The solution to the problem is on the same link.