Das macht mich verrückt! Ich habe mir einige Fragen zu Stackoverflow angesehen und festgestellt, dass ein ID-Element Vorrang vor einem Klassenelement hat (was gut zu wissen ist, aber ich habe das Gefühl, dass dies nicht mein Problem ist). Es ist mein Navigationsmenü, mit dem ich zu kämpfen habe. (Ich benutze Max-Breite übrigens)

Hier ist das ALLGEMEINE CSS für meinen NAV:

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; }

Wenn das Ansichtsfenster UNDER 1140px ist, möchte ich, dass das CSS das Menü folgendermaßen ändert:

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

Grundsätzlich wird das Menü mit weniger Polsterung nach links verschoben.

Wenn das Ansichtsfenster UNDER 800px ist, möchte ich, dass das CSS das Menü wie folgt ändert:

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

Wie Sie sehen, habe ich nur den NAV-Float auf NONE geändert

Wenn ich es jetzt teste, funktioniert das ALLGEMEINE CSS genauso gut wie der Viewport unter 1140px, aber sobald ich unter 800px gehe, schwebt der NAV immer noch nach links !! ?? Es scheint, die CSS-Medienabfrage von 1140px zu erben? Irgendwelche Ideen?

UPDATE: So definiere ich meine Medienabfragen

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />