Why don't media queries work on boundary points?

Question

css

I'm not a specialist. on layout, but I'm wondering why media queries, let's take the example of bootstrap 3, do not work on boundary breakpoints.
for example, a block with classes
.hidden-sm .hidden-md
where, respectively:

@media (max-width: 991px) and (min-width: 768px){
.hidden-sm {
    display: none!important;
}
}
@media (max-width: 1199px) and (min-width: 992px){
.hidden-md {
    display: none!important;
}
}

will not be hidden when the screen width is 991 px (i.e., styles will not work on the border of the transition). why is this happening and how is it solved?

Answer 1

the problem turned out to be that on high resolution monitors there is a scaling in the system settings (eg 150% for applications and other things) and this gives incorrect display in such situations in browsers. when set to 100% everything is ok. so it might be useful for someone.

Answer 2

I forgot the brackets!

@media (max-width: 1199px) and (min-width: 992px) {
  .hidden-md {
      display: none!important;
  }
}