title: Why is my CSS media query being ignored or overridden?
body: <p>This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). 
  It's my NAVIGATION menu that I'm struggling with. (I use max-width btw)</p>
  
  <p>Here is the GENERAL CSS for my NAV:</p>
  
  <pre><code>nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
  font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }
  </code></pre>
  
  <p>Now when the Viewport is UNDER 1140px, I want the CSS to change the menu like so:</p>
  
  <pre><code>nav ul li{ float:left;}
  nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
  </code></pre>
  
  <p>So basically the menu will float left with less top padding.</p>
  
  <p>When the Viewport is UNDER 800px, I want the CSS to change the menu like so:</p>
  
  <pre><code>nav ul li{ float:none;}
  nav a{ float:none; padding: 20px 20px 20px 20px;}
  </code></pre>
  
  <p>As you can see I've I only changed the NAV Float to NONE</p>
  
  <p>Now when I test it, the GENERAL CSS works fine as well as when the view port under 1140px, but as soon as I go under 800px, the NAV still floats to the left!!?? It seems to be inheriting the CSS media query of 1140px? 
  Any ideas?</p>
  
  <p>UPDATE:
  This is how I am defining my media queries</p>
  
  <pre><code>&lt;link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
  (max-device-width: 800px)" href="small-device800.css" /&gt;
  &lt;link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
  (max-device-width: 1140px)" href="small-device1140.css" /&gt;  
  </code></pre>