Centered content in horizontal bands without wrapper?

dabblet.css

/**
 * Centered content in horizontal bands without wrapper?
 */

html,body {
background-color: #FFF;
color: #333;
margin: 0; padding:0;
font: 16px/32px Arial, sans-serif;
}
h1, p { margin: 0; line-height: 2 }
section { padding: 0 2em; }

/* Wrapper div needed: boo */
section>div { 
width: 500px; 
margin: 0 auto; 
padding: 0 1em;
border: 1px dotted #000; 
}
.s1 { background-color: #ccc; }
.s2 { background-color: #ddd; }
.s3 { background-color: #eee; }

/* And now without wrapper div.. */
/* I've fiddled with :before etc. but :[ */
#nowrapper section { }

dabblet.html

<section class="s1">
	<div>
		<h1>Section 1</h1>
		<p>So this is the look I need: centered (fixed width) content in horizontal 'bands' that span the whole width of the page. I'd like to ditch the DIV's in the SECTION...</p>
	</div>
</section>
<section class="s2">
	<div>
		<h1>Section 2</h1>
		<p>It's not a strange 'design pattern' really...</p>
	</div>
</section>
<section class="s3">
	<div>
		<h1>Section 3</h1>
		<p>.. And the DIV's are not *that* bad. But still: this must be possible right? </p>
	</div>
</section>

<div id="nowrapper">
	<section class="s1">
		<h1>NOWRAP Section 1</h1>
		<p>The content in these SECTION's are not wrapped in a DIV's. Nice &amp; clean...</p>
	</section>
	<section class="s2">
		<h1>NOWRAP Section 2</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
	</section>
	<section class="s3">
		<h1>NOWRAP Section 3</h1>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
	</section>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}