Nik_Set_7

Я думаю ответ на этот вопрос Вы должны дать сами.
Но чтобы разобраться, надо удалить нафиг этот код и переписать его с использованием jQuery (так будет лучше).
Перепишите и скорее всего заработает.

Плюс разберитесь с модульностью в js через import/export:
https://learn.javascript.ru/modules

Это нужно, чтобы избежать загрязнения глобальной области обработчиками и пр.
Для работы конструкций ES6 Вам понадобится сборщик webpack4 или менеджер задач Gulp с таском с browserify (советую первый вариант)

Это всё нужно, чтобы Ваш код был:
- проще
- понятнее в первую очередь для Вас
- в случае ошибки Вы быстрее сможете найти её (в каком модуле)

header - это блок. От него можно дальше идти: создавать элементы и добавлять модификаторы.
В PostCSS есть миксины. Вы просто импортируете их в то или иное разрешение, в зависимости от того, как блок/элемент должен выглядеть

Странно, проверьте получение стилей напрямую: пропишите свой домен в адресной строке браузера и путь до файлов.
если 404, то ошибка в путях до стилей

По сути тут может быть только две причины: либо не правильно прописаны стили, либо сервер не правильно настроен на отдачу статики.

Плюс ещё одна ошибка может быть, как подсказали в комментариях - нет прав. В этом случае Вам надо через терминал исправить это

Да, добавить модификаторы, если они идеологически одинаковые.
Если же они на вид одинаковые, но по сути содержат разный контент, то лучше создать два отдельных блока.