Better Syntax for vertical page with full-width backgrounds?

Hi, I'm working on a page that has many parts on one page, instead of individual pages. The background is full-width while the content is in a wrapper that is centered. I've seen this all over the web, and I have an idea how it's done... but it just seems like the syntax could be better than how I'm wanting to do it.

Basically, my understanding is that it is a div full the full width, with a div inside that (the wrapper), then with the main content inside... and you do this for every section.

Example: <div class="full-width"> <div class="wrapper"> <h2>This is top section</h2> </div> </div>

<div class="full-width">
    <div class="wrapper">
       <h2>This is middle section</h2>
    </div>
 </div> 

<div class="full-width">
    <div class="wrapper">
       <h2>This is bottom section</h2>
    </div>
 </div> 

is there a shorter, better way to do this? Additionally, is there a way to keep sections from being affected by margins of elements inside the wrapper tag? I have to purposely add padding or there will be a gap.

Thanks!