'@media rule doesnt work on 600px but works on other values

There is an .element that has margin-right:40px

I set the media rule to: @media (max-width:600px) {.element{margin-right:0;}}

The media rule will not trigger on 600px, it triggers on 599px (only on Firefox).

Now, if i change the above rule to this: @media (max-width:753px) {.element{margin-right:0;}}

then the rule will trigger at 753px as it should. It seems like 600px specifically is not triggering.

I have attached an image to showcase the issue:

media query bug firefox

As you can see we are at 600px and the margin-right value is active (yellow color).

What might be causing that bug?

More proof:

enter image description here

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source