@media queries - why does css rule overrule another? <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>