Почему не работают медиа-запросы без !important?

Question

[dineroL33]

Создал отдельный файл для медиа-запросов, подключил его в style.css через import

@import "reset.css";
@import "media.css";

Media.css:

/*PC*/
@media (max-width: 1087px) {
    [class*="__container"] {
        max-width: 970px !important;
    }
}
/*TABLET*/
@media (max-width: 991.98px) {
    [class*="__container"] {
        max-width: 750px !important;
    }
    .header__container {
        min-height: 80px !important;
    }
    .header__button {
        flex: 0 0 170px !important;
    }
    .menu__item {
        margin: 0px 30px 0px 0px !important;
    }
}

/* MOBILE */
@media (max-width: 767.98px) {
    [class*="__container"] {
        max-width: none;
    }
}

Основной код тут:
https://codepen.io/dineroL33/pen/MWrjPQP

Столкнулся с такой проблемой, что стили, прописанные в файле media не срабатывают без использования !important

Comments

[Beliyadm]

Ну наверно, потому что импорт должен быть строго сверху, соответственно в потоке медиа запросы оказываются выше десктопных, которые их и перебивают, если первым не укать !important
Вытащите медиа запросы после основных стилей

[dineroL33]

Спасибо, исправил