JSFiddle - React, Tailwind, and code Playground

HTML

<div id='one'>
	<div class="row">header</div>
	<div class="wide">wide</div>
	<div class="row">content</div>
	<div class="row">footer</div>
</div>

<div id='two'>
	<div class="row">header</div>
	<div class="wide">wide</div>
	<div class="row">content</div>
	<div class="row">footer</div>
</div>

CSS

#one, #two{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
div{text-align:right; }

#one div {border: 1px solid red;}
#two div {border: 1px solid green;}

/* one */
#one .row{
	margin:0 auto;
	width:1000px;
	display:block;
}
#one .wide{
	background-color:rgba(255,51,0,0.5);
	height:350px;
	display:block;
}

/* two */

#two .row{
	margin:0 auto;
	width:100%;
	display:block;
}
#two .wide{
	background-color:rgb(0, 255, 176);
	height:350px;
	display:block;
}