Александр

Javascript и медиазапросы в CSS никак не связаны. Они работают независимо друг от друга. Почему думаете что причина в JS?

Я бы ничего не делал. Ведь если на сайте нету тега вьюпорт, то и сам сайт соответствующий? Зачем вам масштабировать свое окно, когда сайт выглядит как обычно?

Оптимальный метод верстки используется, например, в бутстрапе 4 - https://getbootstrap.com/docs/4.0/layout/grid/
Разметка на флексах. Для изучения можно посмотреть примеры - https://getbootstrap.com/docs/4.0/examples/

Нужно обернуть input в div и добавить туда элемент иконки. Можно напрямую, либо через псевдоэлементы.
Как пример - https://www.w3schools.com/howto/howto_css_form_icon.asp

Flexbox'ом - https://www.w3schools.com/css/css3_flexbox.asp

Можно, например вот так - https://jsfiddle.net/3qofLhej/ но с отступами поработать.

У вас элемент .header-top с позицией абсолют, а его родитель не имеет своей высоты. Либо задать родителю высоту, либо не использовать абсолют.

Поддерживаю ответивших. Такой подход к делу не пахнет интересом. Вы рассчитываете.
Когда человек решает чем-то заниматься, он уже решил и просто делает и по ходу дела уже смотрит.
А по вашему: сначала я куплю "Мерс" и только потом буду на работу любимую ездить, а то что на маршрутках ездить, вдруг пробки или сломаются.