Isto está me deixando louco! Eu observei algumas questões no Stackoverflow e vi que um elemento de ID tem prioridade sobre um elemento de classe (o que é bom saber, mas tenho a sensação de que isso não é problema meu). É o meu menu de NAVEGAÇÃO com o qual estou lutando. (Eu uso max-width btw)

Aqui está o CSS GERAL para o meu 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; }

Agora, quando a Viewport estiver abaixo de 1140px, eu quero que o CSS mude o menu da seguinte forma:

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

Então, basicamente, o menu flutuará à esquerda com menos preenchimento superior.

Quando o Viewport está abaixo de 800px, eu quero que o CSS mude o menu da seguinte forma:

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

Como você pode ver, eu só mudei o NAV Float para NONE

Agora, quando eu testá-lo, o GENERAL CSS funciona bem, bem como quando a porta de visualização sob 1140px, mas assim que eu ir abaixo de 800px, o NAV ainda flutua para a esquerda !! ?? Parece estar herdando a consulta de mídia CSS de 1140px? Alguma ideia?

ATUALIZAÇÃO: É assim que eu estou definindo minhas consultas de mídia

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