title: HTML/CSS: @media for exact screen size
body: <p>I'm trying to understand CSS a bit and I'm currently somewhat stuck with @media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:</p>
  
  <pre><code>section {    
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-right: 10px;
      background-color: brown;
  }
  
  @media screen and (max-width: 9999px) {
      section {
          background-color: red;
      }
  }
  
  @media screen and (max-width: 1000px) {   
      section {
          background-color: blue;
      }
  }
  
  @media screen and (max-width: 500px) {
      section {
          background-color: yellow;
      }  
  }
  </code></pre>
  
  <p>Just using a simple </p>
  
  <pre><code>&lt;section&gt;
      bla
  &lt;/section&gt;
  </code></pre>
  
  <p>HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
  <a href="https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6</a>
  However, it does not work like I'd want it to.
  For the yellow background (&lt; 500px), it stays yellow until 500 included.
  For the blue background (>= 500px &amp;&amp; &lt; 1000px), it stays blue until 1000 included.
  For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
  It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?</p>