¡Esto me está volviendo loco! He analizado algunas preguntas en Stackoverflow y veo que un elemento de ID tiene prioridad sobre un elemento de clase (lo que es bueno saber, pero tengo la sensación de que este no es mi problema). Es mi menú de navegación con el que estoy luchando. (Yo uso ancho ancho por cierto)

Aquí está el CSS GENERAL para mi 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; }

Ahora, cuando la ventana gráfica es BAJO 1140px, quiero que el CSS cambie el menú así:

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

Así que básicamente el menú flotará hacia la izquierda con menos relleno superior.

Cuando la ventana gráfica es BAJO 800px, quiero que el CSS cambie el menú de la siguiente manera:

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

Como puede ver, solo cambié el NAV Float a NONE

Ahora, cuando lo pruebo, el CSS GENERAL funciona bien, así como cuando el puerto de visualización está por debajo de 1140px, pero tan pronto como lo hago por debajo de 800px, ¡¡el NAV sigue flotando hacia la izquierda !! Parece estar heredando la consulta de medios CSS de 1140px? ¿Algunas ideas?

ACTUALIZACIÓN: Así es como estoy definiendo mis consultas de medios

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