Фоновый отступ заголовка не изменяется в @media

Question

Я довольно новичок в мире сценариев и кодирования, поэтому я не знаю лучших терминов для использования.

Я пытаюсь сделать несколько более простой веб-сайт и хочу, чтобы фон моего заголовка былимеют padding-bottom 120px при min-width 600px и 0 при 1050. Однако нижний отступ обновляется только при изменении в свойствах для заголовка.

Вот мой код:

header {
   border-radius: 5px;
   display: block;
   width: auto;
   min-height: 200px;
   background: #E44;
   padding-top: 40px;
   padding-left: 38px;
   padding-right: 38px;
   padding-bottom: 136px;
}
@media screen and (min-width: 600px) {
 .header {
   padding-bottom:120px
 }
}
@media screen and (min-width: 1050px) {
 .header {
   padding-bottom: 0px;
 }
}

padding-bottom остается на 136px независимо от min-width окна.

Answer 1

Убедитесь, что вы знаете разницу, которую делает точка..header - выбор класса заголовка.Пока header выбирает элемент.Ваш код работает нормально, как вы можете видеть здесь, я использую медиазапросы, чтобы изменить цвет фона вместо заполнения, просто чтобы прояснить ситуацию.

Пример Fiddle

header {
  border-radius: 5px;
  display: block;
  width: auto;
  min-height: 200px;
  background: #E44;
  padding-top: 40px;
  padding-left: 38px;
  padding-right: 38px;
  padding-bottom: 136px;
}
@media screen and (min-width: 600px) {
  .header {
    background-color: blue;
  }
}
@media screen and (min-width: 1050px) {
  .header {
    background-color: green;
  }
}

<header class="header">
  
</header>

Answer 2

Здесь есть небольшая опечатка.У вас есть дополнительный dot(.), который будет означать class selector по сравнению с другим стилем, который находится на element selector.

@media screen and (min-width: 600px) {
  header {
    padding-bottom:120px
  }
}
@media screen and (min-width: 1050px) {
  header {
    padding-bottom: 0px;
  }
}