/* 1. Устанавливаем высоту */
html {
    height: 100%;
}

body {
    /* Используем min-height вместо height, чтобы на мобилках контент не обрезался */
    min-height: 100vh; 
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* 2. Настройка главного контента */
main {
    /* Занимает всё свободное место по высоте */
    flex: 1 0 auto; 
    
    /* ОЧЕНЬ ВАЖНО: */
    width: 100%; /* Чтобы flex-контейнер не сжимал main */
    box-sizing: border-box; /* Чтобы padding-и не раздували ширину больше 100% */
    padding-top: 88px;
}

/* 3. Футер всегда внизу */
footer {
    flex-shrink: 0;
    margin: 0 8px 8px 8px; /* Те самые зазоры: 0 сверху, 8 по бокам и снизу */
}

/* 4. Глобальный фикс для всех элементов (рекомендую добавить) */
*, *::before, *::after {
    box-sizing: border-box;
}