Мультимедиа в CSS не работает с максимальной шириной

Я пытаюсь выполнить медиа-запрос в scss, но он не работает. у меня такой код

<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 459px) {
  body {
    background: black;
  }
}
</style>

Теперь медиа-запрос не работает для ширины 459 пикселей, а фон красный... (черный на макс. 458 и желтый на 460) но когда я перешел на

<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 460px) {
  body {
    background: black;
  }
}
</style>

Тогда черный фон работает для 459 пикселей, но на 460 пикселей работают два медиа-запроса... как исправить, что при максимальной ширине у меня будет только черный фон, а при минимальной ширине только желтый?