Почему контейнер игнорирует медиа-запросы?

Question

[EvolveSunVolt]

Не могу разобраться, почему контейнер игнорирует мои медиа-запросы, в чем может быть проблема?

У меня задан глобальный стиль:

.container {
  max-width: 90rem;
}

В медиа запросах указал, что:

@media all and (max-width: 1200px) {
  .container {
    max-width: 71rem;
  }
}

В хеде хтмл стоит:

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Все локальные стили подключены через link.
Однако, инструменты разработчика chrome на ширине 1200 и меньше "говорят", мол:

.container {
  max-width: 90rem;
}

К слову, библиотека bootstrap подключена.

Comments

[Ankhena]

1. Нужно проверять порядок свойств в коде
2. Правильность написания селекторов

Если всё равно никак, то показывать ссылку на рабочую версию или делать песочницу с видимой проблемой на codepen.io

[EvolveSunVolt]

Попробуйте добавить !important после свойства, которое вы хотите перезаписать.
Например:

@media all and (max-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}

Пишет мне gpt3, но все же, как думаете это норм решение?

[Lynn «Кофеман»]

EvolveSunVolt, если сработало, то на скорее всего у вас просто перепутан порядок подключения стилей и вместо `!important` нужно просто поправить порядок.

[EvolveSunVolt]

у вас просто перепутан порядок подключения стилей

Да, вы правы, спасибо вам большое)

Answer 1

[Stalker_RED]

Нет, он не игнорирует (поменял цифры чтобы наглядно было даже во встроенном виджете)