Медиа-запросы CSS накладываются друг на друга ⇐ CSS

[Anonymous]

Я пытаюсь расположить кнопку меню панели навигации по центру панели навигации на небольших экранах (изменение полей). Тем не менее, каждый раз, когда я делаю новый медиа-запрос, предыдущий больше не работает. Кто-нибудь знает, как добавить медиа-запрос, не «нарушая» предыдущий, или кто-нибудь знает другое работающее решение моей проблемы?

Вот CSS с медиазапросами:
**/* НОРМАЛЬНЫЙ КОНЕЦ СМАРТФОНА */ /* НОРМАЛЬНОЕ НАЧАЛО КОМПЬЮТЕРА */ @media (минимальная ширина: 980 пикселей) { навигация ул { плавать: вправо; поле справа: 20 пикселей; } нав уль ли { отображение: встроенный блок; высота строки: 80 пикселей; поле: 0 5 пикселей; } } /* ОБЫЧНЫЙ КОНЕЦ КОМПЬЮТЕРА */ Экран только @media и (максимальная ширина: 780 пикселей){ .checkbtn{ маржа сверху: 102 пикселей; поле справа: 45 пикселей; } } Только экран @media и (максимальная ширина: 815 пикселей) и (минимальная ширина: 781 пиксель){ .checkbtn{ поле сверху: 92 пикселей; } } Только экран @media и (максимальная ширина: 845 пикселей) и (минимальная ширина: 816 пикселей){ .checkbtn{ поле сверху: 75 пикселей; } } @media (макс. ширина: 900 пикселей){ .checkbtn{ маржа сверху: 45 пикселей; } } @media (макс. ширина: 815 пикселей){ .checkbtn{ маржа сверху: 87 пикселей; } } @media (макс. ширина: 570 пикселей){ .checkbtn{ маржа сверху: 181 пикселей; поле справа: 48 пикселей; } label.logo{ поле слева: -10 пикселей; } } /* Только экран @media и (максимальная ширина: 927 пикселей) и (минимальная ширина: 901 пиксель){ .checkbtn{ поле сверху: 35 пикселей; } } */**