To doprowadza mnie do szaleństwa! Sprawdziłem kilka pytań dotyczących Stackoverflow i zobaczyłem, że element ID ma pierwszeństwo przed elementem klasy (co dobrze wiedzieć, ale mam wrażenie, że to nie jest mój problem). To moje menu NAWIGACJI, z którym się zmagam. (Używam max-width btw)

Oto OGÓLNY CSS dla mojego 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; }

Teraz, gdy rzutnia jest poniżej 1140px, chcę, aby CSS zmienił menu w następujący sposób:

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

Zasadniczo menu będzie płynąć w lewo z mniejszym wypełnieniem.

Gdy rzutnia jest poniżej 800 pikseli, chcę, aby CSS zmienił menu w następujący sposób:

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

Jak widać, zmieniłem tylko pływak NAV na NONE

Teraz, kiedy go przetestuję, GENERAL CSS działa dobrze, podobnie jak port widoku poniżej 1140px, ale jak tylko przejdę poniżej 800px, NAV wciąż pływa po lewej stronie !! ?? Wydaje się, że dziedziczy on zapytanie CSS o media 1140px? Jakieś pomysły?

AKTUALIZACJA: W ten sposób definiuję moje zapytania o media

<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" />