Почему мой медиазапрос CSS игнорируется или переопределяется?

Это сводит меня с ума! Я просмотрел несколько вопросов на Stackoverflow и увидел, что элемент ID имеет приоритет над элементом класса (, что полезно знать, но у меня есть ощущение, что это не моя проблема ). Это мое меню НАВИГАЦИЯ, с которым я борюсь. (Я использую максимальную -ширину между)

Вот ОБЩИЙ CSS для моего 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; }

Теперь, когда область просмотра меньше 1140 пикселей, я хочу, чтобы CSS изменил меню следующим образом:

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

Таким образом, в основном меню будет перемещаться влево с меньшим верхним отступом.

Когда область просмотра меньше 800 пикселей, я хочу, чтобы CSS изменил меню следующим образом:

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

Как видите, я только изменил NAV Float на NONE

Теперь, когда я тестирую его, ОБЩИЙ CSS работает нормально, а также когда порт просмотра ниже 1140 пикселей, но как только я ухожу ниже 800 пикселей, NAV все еще плавает влево!!?? Кажется, он наследует медиазапрос CSS размером 1140 пикселей? Любые идеи?

ОБНОВЛЕНИЕ :Вот как я определяю свои медиа-запросы

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