title: How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)
body: <p>I want to make responsive page using react JS. I have some problems making it. I don't really know how media query CSS works, but for <code>@media(max-width:1024)</code> and <code>@media(max-width:768px)</code> sizes it works as I expected.
  I guess for size <code>@media (max-width:425px)</code> will also work as where <code>@media(max-width:768px)</code> works. But apparently starting from <code>@media(max-width:425px)</code> it follows the previous breakpoint(<code>@media(max-width:768px)</code>) and <code>@media(max-width:375px)</code> following the <code>@media(max-width:425px)</code> style. At breakpoint 320px back to my expectations.</p>
  <p>This is my html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          This is content
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>And this is my CSS code:</p>
  <pre><code>.container{
      background-color: red;
      height: 100vh;
  }
  
  @media(max-width:1024px){
      .container{
          background-color: yellow;
      }
  }
  @media(max-width:768px){
      .container{
          background-color: green;
      }
  }
  @media(max-width:425px){
      .container{
          background-color: blue;
      }
  }
  @media(max-width:375px){
      .container{
          background-color: rosybrown;
      }
  }
  @media(max-width:320px){
      .container{
          background-color: rosybrown;
      }
  }
  </code></pre>
  <p>Is there a way for each breakpoint to take its own style. As in <code>max-width:1024px</code> which takes a yellow background and <code>max-width:768px</code> takes a green background. Is it possible if I want if at <code>max-width:425px</code> it takes a blue background and at <code>max-width:375</code> it takes a rosybrown color. Thank you in advance.</p>