Как правильно организовать не простую обёртку для сайта (container, wrapper)?

Question

[qwekaqwe]

Как правильно организовать обёртку для адаптивного сайта (мобилный, планшет, десктоп. mobile first)?<header/main/footer class="*/*/*-main container"> не получится, так как в потоке есть блоки, которые должны тянуться на всю ширину экрана. 100vw не подходит из-за того, что в некоторых браузерах вертикальная прокрутка входит в часть вьюпорта, то есть появляется горизонтальная прокрутка.

Имеется примерно такая структура сайта:

<header>
  <section1></a>
  <section2></a>
  <section3></a>
</header>
<main>
  <div1></div>
  <div2></div>
  <div3></div>
  <div4></div>
  <div5></div>
  <div6></div>
</main>
<footer>
  <span1></span>
  <span2></span>
</footer>

Общая ширина мобильной версии 320px + отступы по 10px

Например, здесь, фоновое изображение задается на всю ширину (предположим section3)


А здесь растягивается карта (предположим div6)


Ну а если задавать отступы для обертки, то большинство блоков будет без отступа слева, что не очень хорошо при использовании БЭМ и переносе элемента в другое место


Будет ли хорошим тоном задавать ширину для блоков 320px, а отступы по 10px делать уже в самих блоках? Или же есть более лучшая реализация оберток для таких сайтов?

UPD!!!
Точнее вообще не задавать ширину блокам в header, main, footer.

body {
  min-width: 320px;
  margin: 0 auto;
  padding: 0;
}

в блоках указать паддинги по 20px

Comments

[Ankhena]

Либо фон вставлять псевдоэлементом либо задавать доп.обертки вокруг нужных секций.

[qwekaqwe]

Ankhena, хорошо, фон я могу сделать псевдоэлементом, но карту то я псевдоэлемнтом не сделаю, которая должна тянуться на всю ширину. У меня в голове только один вариант: никаких глобальных/контейнерных паддингов. Блоки делать шириной 320px и уже в них указывать отступы. Но вот на сколько это хорошая практика?

[Rustam Bainazarov]

qwekaqwe, а в чём проблема прижать карту к краям? Отрицательным margin, если прямой наследник, или, если не прямой, — отрицательный margin + calc(100 + двойной отступ). Либо тупо padding обнулить у родителя, что логичнее.

P. S. Делать блоки строго 320px — это косая практика.

[Ankhena]

qwekaqwe, если вы зададите всем блокам отступы, то придется компенсировать их отрицательными марджинами. Зачем двойную работу-то делать?
Логично задавать только нужные свойства.

Да и паддинг у блоков-центровщиков, а не у оберток, которые на всю ширину.

Answer 1

[dom1n1k]

Делать 2 вложенные обертки (полная ширина и с отступами) - нормальная практика.