title: media queries in css not working properly
body: <p>I am using this code in my web page and I tried different settings for <code>min-width</code> but it take values only from the media query having least width.</p>
  
  <pre><code>@media only  screen and (min-width: 900px) {
      li{
          display: inline;
          padding-left : 5%;
          padding-right: 5%;
      }
      li.one{
          padding-left: 13%;
      }
  @media only screen and (min-width: 800px) {
      li {
          display: inline;
          padding-left : 5%;
          padding-right: 5%;}
      li.two{
          padding-left: 9%;
      }
  }
  @media only screen and (min-width: 600px),screen and (max-width: 601px) {
      li {
          display: inline;
          padding-left : 5%;
          padding-right: 5%;
      }
      li.three{
          padding-left: 7%;
      }
  }
  </code></pre>
  
  <p>Don't know what is stopping other queries to work properly.</p>