title: @media queries - one rule overrides another?
body: <p>I have multiple @media queries all working fine but as soon as i put in a higher max screen-width than 1024px the rules for the higher width gets applied to everything.</p>
  
  <pre><code>    @media screen and (max-width: 1400px)
      {
          #wrap {
          width: 72%;
          }
      } 
  @media screen and (max-width: 1024px) 
  {
      #slider h2 {
      width: 100%;
      }
      #slider img {
      margin: 60px 0.83333333333333% 0 2.08333333333333%;
      }
      .recent {
      width: 45.82%;
      margin: 10px 2.08333333333334% 0 1.875%;
      }
  }
  </code></pre>
  
  <p>as you can see 1024px (and also the 800px max-width query) do not change the #wrap width and work fine. As soon as i add the 1400px max-width query it changes them to 72% for ALL sizes and does the same for any element - for instance if i set #slider img to have a margin of 40px it will show at ALL sizes even though it is only in the max-width of 1400px.</p>
  
  <p>Am i missing something really obvious? Been trying to work this out for the past 2 days!
  Thanks, John</p>