title: media query-specified resolution different from reality
body: <p>I use:</p>
  
  <pre><code>@media(max-width:992px){
      h3{
          color:red;
      }
  }
  </code></pre>
  
  <p>but in the browser it seems that the change does not happen at 992px, but when the screensize is at 887px or less. I have tried disabling css files one by one, but the problem doesn't seem to go away.
  I can't figure out what the problem is.</p>
  
  <p>EDIT: It must be something in the HTML file, because when I try the same code for another html file, it works properly. Also, I've noticed that boostrap's media queries are also not working properly (for example, if one of the breaking points is say 1200px, the changes happen at around 1120px in the browser). No idea what causes this. I've tried commenting different parts of the HTML, but it's always the same.</p>