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

Адаптивность в CSS держится на четырех вещах вместе: теге viewport в head, относительных единицах вместо фиксированных пикселей, media-запросах под конкретные ширины экрана и гибкой раскладке через flexbox или grid вместо фиксированной ширины блоков. Без первого пункта - meta viewport - остальное не сработает вообще, мобильный браузер будет просто уменьшать десктопную версию целиком, а не подстраивать верстку под маленький экран.

Начните с строки в head: <meta name="viewport" content="width=device-width, initial-scale=1">. Она говорит браузеру ориентироваться на реальную ширину устройства, а не рендерить страницу как будто на большом экране с последующим уменьшением - это самая частая причина, когда "съезжает все" на телефоне, хотя сам CSS написан правильно.

Дальше замените фиксированные значения width в пикселях на проценты, rem или vw там, где блок должен подстраиваться под контейнер, а не быть жестко заданного размера. Media-запросы добавляйте по принципу "мобильный сначала": пишите базовые стили под маленький экран, а затем через @media (min-width: 768px) и @media (min-width: 1024px) добавляйте раскладку для планшета и десктопа - это проще, чем идти от десктопа и постоянно переопределять стили в обратную сторону.

Для самой раскладки блоков используйте flexbox (когда элементы идут в ряд или колонку и должны гибко занимать место) или grid (когда нужна настоящая сетка с несколькими колонками) - оба умеют сами перестраивать элементы под media-запросом без лишнего кода, в отличие от старых float. Проверять адаптив нужно не только растягиванием окна браузера, а в инструментах разработчика (F12, режим устройства) на паре реальных ширин - 375px для телефона, 768px для планшета, и по возможности на настоящем телефоне: эмулятор не всегда точно показывает поведение шрифтов и скролла.