CSS @ media запрос не работает как задумано

Question

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

@media only screen and (max-width: 1025px) and (min-width: 901px){
  .menu-box{
    margin: 3px 6px 3px 6px;
  }
}

@media only screen and (max-width: 900px) and (min-width:771px){
  .menu-box{
    margin: 3px 1px 3px 1px;
  }
}

@media only screen and (max-width: 770px) and (min-width: 700px){
  .menu-box{
    margin: 3px 3px 3px 3px;
  }
}
/* this one does not work */
@media only screen and (max-width: 360px){
  .box-wrapper{
    left: -20px;
  }
}

Answer 1

Я выполнил свои медиа-запросы in-line, что было неверно.

Answer 2

Странно.Это должно работать.Вы можете видеть это Codepen .Проверьте следующее:

1. Правильно ли указано имя класса .box-wrapper?Это класс или Id?
2. Ваш класс .box-wrapper имеет position: absolute или position: relative?Потому что left свойство CSS не работает на position: static.Также по умолчанию используется «статическая» позиция.