title: some media queries in my css are ignored
body: <p>I have the following css. The first '4 columns' media queries work, the rest is ignored. If I put '5-columns' before '1-column' that one works but '1, 6 and 7 are ignored. If I put 6 above that one works, but 1 and 5 are ignored. 2, 3 and 4 columns keep working no matter where I put them. I don't see the problem. I hope anyone can help me out.</p>
  
  <pre><code>#header-wrap {
      border-bottom: 1px solid #EFEFEF;
      margin: 32px 32px 16px;
      padding: 0 0 32px;
  }
  
  /* 1 column */
  @media all and (max-width: 607px) {
      #header-wrap {
      width: 256px;
      }
  }
  
  /* 2 columns */
  @media all and (min-width:607px) and (max-width:895px) {
      #header-wrap {
      width: 544px;
      }
  }
  
  /* 3 columns */
  @media all and (min-width:895px) and (max-width:1183px) {
      #header-wrap {
      width: 832px;
      }
  }
  
  /* 4 columns */
  @media all and (min-width:1183px) and (max-width:1471px) {
      #header-wrap {
      width: 1120px;
      }
  }​
  
  /* 5 columns */
  @media all and (min-width:1471px) and (max-width:1759px) {
      #header-wrap {
      width: 1408px;
      }
  }​
  
  /* 6 columns */
  @media all and (min-width:1759px) and (max-width:2062px) {
      #header-wrap {
      width: 1696px;
      }
  }​
  
  /* 7 columns */
  @media all and (min-width:2062px) {
      #header-wrap {
      width: 1696px;
      }
  }​
  </code></pre>