Проблема скорее всего связана с CSS-свойством display: flex; на контейнере, в котором находятся шапка, основное содержимое и подвал. Если основному содержимому (главному блоку) не задана ширина, а шапке и подвалу задано свойство flex-grow: 0, то они займут только минимально необходимое пространство.
Чтобы улучшить форматирование кода и четко отделить шапку и подвал друг от друга, можно сделать следующее:
1. Использовать отдельные секции для шапки, основного содержимого и подвала в HTML-разметке. Например:
```html
<header>Шапка сайта</header>
<main>Основное содержимое</main>
<footer>Подвал сайта</footer>
```
2. Применить к шапке и подвалу желаемые стили (например, фоновый цвет, отступы, шрифты) в CSS:
```css
header {
background-color: #f0f0f0;
padding: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}
```
3. Использовать гибкую верстку (например, Flexbox или Grid) для распределения содержимого на странице в соответствии с вашими потребностями.
4. При необходимости, отрегулировать ширину или высоту элементов, чтобы они занимали необходимое пространство на странице.
5. Проверить работу сайта на различных устройствах и экранах, чтобы убедиться, что шапка и подвал отображаются корректно и четко отделены друг от друга.