ThunderCat

Короче, у вас заданы жесткие размеры элементов внутри блока, пример:

.search__form {
    border: solid 1px;
    width: 622px;
    height: 48px;
    gap: 24px;
    margin-top: 16px;
}

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

align-items: center;

1) Берем хеадлесс хром
2) скармливаем ему хтмл на печать в пдф с сохранением в файл
3) Готовый файл отдаем пользователю
3) Профит, все красиво, зайчики, графики, картинки...

При этом для отладки достаточно в хроме нажать ctrl+p и сразу увидеть где косяки с разметкой, как оно выглядит и вообще...

Нюансы:
1) хтмл должен быть заточен под вывод на печать, цсс для принт медиа специфичен, но не особо сложен
2) Для серверного хорма цсс/жс/картинки должны содержать полный локальный путь до файла
3) Есть некоторый нюанс с яваскриптами, работающими "не мгновенно", иногда надо поиграться с задержкой, там в параметрах оно настраивается.
Пример

0)

не работает.

Это не ошибка, это ваше предположение. Смотрим консоль, читаем ошибку, пишем сюда.
1) Не используйте заглавные буквы, пробелы и нелатинские символы в именах папок (везде) и файлов, доступных по веб, это критично в части случаев.
2) Разберитесь с путями, вы точно что-то не там кладете, или не там запрашиваете.
3) Скорее всего при запуске сервера папки с файлами у вас будут иметь совершенно другую структуру (не помню как там на шарпе все это компилится), так что ссылки на стили будут другие...

дисплей блок и высота ширина 100%?

на среднем размере сделать 2 блока в ряд, а на мобиле по 1, все в столбик.

background-image?

Что можно сделать?

Не использовать таблицы? С дивами все решается достаточно просто, зачем использовать табличную верстку для адаптива?

Как избежать накопление неиспользуемого CSS-кода в ходе жизни и развития сайта?

В общем случае - никак. Если не следить за привязкой кода к цсс в процессе изменения, то такая фигня будет накапливаться естественным образом.

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

MIYA112412,

времени просто до нг

Имхо только фриланс. На понимание базовых вещей и создание рабочего кода уйдет скорее всего гораздо больше времени. А так за условные 20 баксов получите рабочую версию своих хотелок.

Оптимистичный вариант - если базовые знания на достаточном уровне - возможно успеете под бой курантов.
Пессимистичный - зря потратите время на кривой малорабочий код, сэкономив 20 баксов.

1) Подучить php и написать на нем какие-то формы.

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

2) Создать бд, с mysql знаком, но видел многие делают на phpmyadmin каком-то.

Установки и настройка окружения уже займут какое-то время, даже если поставить готовые пакеты типа опенсервера. Да, создать простенькую бд можно в майадмине, но надо понимать хотя бы базовые принципы работы с реляционными бд. В идеале - типы данных и как их верно применять, 3 нормальную форму, индексирование, внешние ключи...

3) подключить, настроить

Да, подключить, настроить. Масса туториалов, но все это время, которого у вас, судя по срокам, просто нету.

А что, просто включить все + скрыть прелоадер по готовности хтмл не вариант? Зачем все эти циклы?