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

Question

[Max Vyznyuk]

Написал такой медиа запрос:

@media screen and (max-width: 1300px) {
  body {
    background: #333;
  }
}

@media screen and (max-width: 950px) and (min-width: 600px) {
  body {
    background: #765;
  }
  .main-title,
  .sub-title {
    text-align: center;
  }
}

Цвет фона применяется, с первого по счету запроса, но текст выравнивается с другой запроса. В чем проблема? Как решить?

Comments

[Евгений Петров]

Масштаб страницы нормальный?

Answer 1

[Андрей]

все верно. Для первого запроса надо прописать min ширину, в вашем случае 951px

Answer 2

[mr_dev1l]

Попробуйте в первом медиа указать нужное выравнивание

@media screen and (max-width: 1300px)  {
  body {
    background: #333;
  }
  .main-title,
  .sub-title {
    text-align: left;
  }
}