title: media queries not responding to the proper screen size
body: <p>I'm using the latest version of Firefox and my media queries are mostly working fine.  The strange thing is that they aren't responding in the correct way to my screen size.  Here is the example:</p>
  
  <pre><code>.div{
      float:left;
      width:50%;
      text-align:left;
      color:#000000;
      line-height:18px;
      margin-right:15px;
      display:inline;
  } 
  
  @media all and (max-width:1366px){.div{
      float:left;
      width:40%;
      text-align:left;
      color:#000000;
      line-height:18px;
      margin-right:15px;
      display:inline;
  } }
  </code></pre>
  
  <p>Right now my browser is set to 1600 width, yet it is still using the code within the media query (rather than the default code above).  Why would it be doing this when I set (max-width:1366px)?  I've noticed this in many other cases throughout my css code.  I've worked around it before, but want to make sure there isn't a simple explanation.</p>