neznaiaka

)))

$('.btn-header').on('click', function () {
    $('.popup-window').addClass('active-2')
 });

$('.pop-up-btn').on('click', function () {
  $('.popup-window').removeClass('active-2')
});

Уберите и document.write, и preventDefault, всё заработает

Такое ощущение, что некоторые, кто тут дает ответы сам версткой толком не занимается. Дивы стандартные блоки, которые используются там, где нет возможности применить семантические теги. В любых иных случаях должны быть применены семантические теги. Это необходимо для поисковиков и для читабельности вашего кода. Таков стандарт html 5. Если вы не хотите соответствовать современным общепринятым стандартам, вы можете верстать хоть таблицами, но будте готовы к понижению позиций своего ресурса в поисковой выдаче, так же вряд ли кому то в дальнейшем понравится сопровождать ваш код. Вешать классы для семантики на дивы имея семантические теги признак отсталости и непрофессионализма. Так может сделать бэкендер или какой-нибудь фуллстак, но не уважающий себя фронт.

как известно наследуют стили от меньшего к большему

Это бред, медиазапросы работают так, как ты их настраиваешь, если тебе нужно задать стилизацию для конкретного диапазона размеров, то пишешь @media (min-width:xxpx) and (max-width:xxpx).

Если же что-то работает «не так» — борозди свой код на предмет тупых утечек. Такое бывает. Если код нашинкован, то понять, где косяк поможет source-map в этапе сборки.