Почему медиа-запрос изменяет стили, которые ему не были предназначены?

Это может происходить по нескольким причинам:

1. Порядок определения стилей: если стили для более широкого экрана были определены раньше, чем для более узкого экрана, то медиа-запросы могут перезаписать эти стили для более узкого экрана.

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

3. Неправильное использование брейкпоинтов: некорректное определение брейкпоинтов может привести к тому, что стили для различных экранов будут конфликтовать между собой при изменении размера окна браузера.

Чтобы избежать подобных проблем, важно следовать принципу mobile first и правильно определять порядок и точность медиа-запросов, а также корректно использовать брейкпоинты для различных устройств.

потому что такой запрос должен содержать селектор элементов в теле, а не наоборот. 
 
/* Красный фон применяется только, если ориентация экрана альбомная */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (orientation: landscape) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}