title: @media queries - why does css rule overrule another?
body: <p>im using a media query for <code>max-width: 768px;</code>
  and have put the css rule for an element as <code>left: 80px;</code></p>
  
  <p>then BENEATH this i have another media query targeting max width of 800px
  and in that i have the same element set to <code>left: 94px;</code></p>
  
  <p>However when i change the screen size to the smaller 768 and check with firebug the rule of <code>left: 80px;</code> is crossed out and the <code>left: 94px;</code> is being followed.</p>
  
  <p>Any ideas why?</p>