Проблема с медиа-запросами в шапке - Вопросы по CSS

Здравствуйте!

Отверстал сайт: http://georg.artcolorit.com/

В шапке есть 2 картинки с орнаментами, которые сделаны при помощи псевдоклассов :before и :after. До 1366px по ширине ещё вполне сносно смотрится, а вот как настроить высоту этих орнаментов на более высоких разрешениях?

Прописывал через медиа-запросы через !important, но вообще иначе работает. Может кто-то сможет подсказать как это всё-таки реализовать?

Заранее благодарен.

Увеличиваем высоту и смещаем за границы шапки (для верхнего например top:-30px и bottom:-30px для нижнего).

Увеличиваем высоту и смещаем за границы шапки (для верхнего например top:-30px и bottom:-30px для нижнего).

Не, ну это понятно. Дело в том, что не работают стили почему-то. В данный момент прописаны стили для ширины 1366px:

Но на этом разрешении они почему-то не подхватываются.

@media (mix-width: 1367px) {
   .bg-header:before, .bg-header:after {
      height: 145px;
   }
   .bg-header:before {
      top: -30px;
   }
   .bg-header:after {
      bottom: -30px;
   }
}

Всё равно не подтягивается что-то стиль. Через Chrome смотрю