Как сделать адаптивный сайт на HTML и CSS?

Адаптивный сайт начинается с правильной разметки HTML, а не с media-запросов в CSS в самом конце: используйте семантические теги (header, nav, main, section, footer) вместо кучи безликих div, не задавайте фиксированную ширину или высоту прямо в HTML-атрибутах и следите за корректной вложенностью блоков. Если структура в разметке уже логичная и гибкая, CSS для адаптива пишется в разы проще - большинство проблем с наездом блоков растут именно из хаотичной HTML-структуры, а не из недостатка media-запросов.

Правильный порядок такой: сначала HTML-скелет страницы без единого стиля, чтобы проверить, что структура и порядок блоков логичны сами по себе. Затем CSS пишется по принципу mobile-first - сначала стили под маленький экран (одна колонка, крупные кнопки для пальца, читаемый размер шрифта), а уже потом через @media (min-width: ...) добавляются стили для планшета и десктопа. Обратный порядок - сверстать под десктоп, а потом "чинить" мобильную версию media-запросами - и есть тот самый источник костылей и отдельных классов, о которых вы пишете.

Частые технические причины наезда блоков: фиксированная ширина в пикселях вместо процентов или rem, забытый box-sizing: border-box (из-за этого padding и border неожиданно добавляются к заданной ширине и блок вылезает за контейнер), картинки без max-width: 100%, из-за чего они не уменьшаются вместе с текстом. Добавьте эти три правила почти в самое начало CSS-файла - они закрывают большинство типичных проблем адаптива еще до media-запросов.

Проверять верстку стоит на реальных ширинах через инструменты разработчика (F12, иконка устройства) на нескольких точках: 375px, 768px, 1024px и 1440px, а не просто растягивая окно браузера мышкой - при плавном растягивании легко пропустить момент, где именно блоки начинают наезжать друг на друга.