How to properly organize a non-simple wrapper for a site (container, wrapper)?

Question

css

How to properly organize a wrapper for an adaptive site (mobile, tablet, desktop. mobile first)? will not work, because there are blocks in the stream that should stretch to the entire width of the screen. 100vw is not suitable due to the fact that in some browsers vertical scrolling is included in the viewport part, that is, horizontal scrolling appears. The site structure looks like this:<header/main/footer class="*/*/*-main container">

<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>

The total width of the mobile version is 320px + padding by 10px
For example, here, the background image is set to full width (suppose section3)

And here the map is stretched (suppose div6)

Well, if you set the padding for the wrapper, then most of the blocks will be without padding on the left, which is not very good when using BEM and moving the element to another place

Would it be good practice to set the width for blocks to 320px, and indent 10px already in the blocks themselves? Or is there a better implementation of wrappers for such sites?
UPD!!!
More precisely, do not set the width of the blocks in the header, main, footer at all.

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

specify paddings of 20px in blocks

Answer 1

Doing 2 nested wrappers (full width and padded) is normal practice.