JSFiddle - React, Tailwind, and code Playground

HTML

<body>
			<header>
				<div>
					<h1>Four New States Legalize Recreational Cannabis!</h1>
				</div>
			</header>
		<div class="main-wrapper">
				<div class="opening-list">
				<h3>Four New States</h3>
				<ul>
					<li>Massachusetts</li>
					<li>California</li>
					<li>Nevada</li>
					<li>Maine</li>
				</ul>
			    </div>
			    <figure class="main-image">
					<a href="img/cannabislegalmap.png">
						<img src="img/cannabislegalmap.png" width=" 100%" alt="Image of a map of states were recreational cannabis is legal">
					</a>
					<figcaption class="caption-clr">States were recreational cannabis use is legal.</figcaption>
			    </figure>
			    <a href="http://www.businessinsider.com/where-is-marijuana-legal-2016-11">For more info click here </a>
			    <p>During this weeks 2016 presidential election four new states
				have legalized recreational cannbis use for adults 21 and older,
				bringing the numebrs of states where you can light up a joint without 
				worrying about being kidnapped and extorted by the state, at least for 
				taxed cannabis to seven. The three previous staes were Washington,
				Colodrao and Alaska. </p>
				<div class="first-right-section">
				<div class="section-wrapper">
				<section>
			    <h4>Massachusetts</h4>
				<p>The majority of Massachusetts voters this week legalized recreational use of cannabis and
				possesion of up to six plants, like the rest of the states arbitrarily for adults 21 or older,
				not 18 when the state decides you're an adult or 25 when the average human brain fully developes but 21.
				The state had decided to tax the sale of cannabis with an additional 3.75 tax, giving the local
				govt the option to add an addtional 2% tax.
				</p>
				<a href="https://ballotpedia.org/Massachusetts_Marijuana_Legalization,_Question_4_(2016)">For more info on Massachusetts legaization click here </a>
				</section>
				<section>
				<h4>California</h4>
				<p>The majority of california voters have voted...

CSS

html{
	margin: auto;
	font-size: 1em;
	padding: 0;
	Max-width: 100%;
	text-align: center;
}
 
 img{
	 display: block;
 }
 img, body, ul{
	max-width: 100%;
	margin: auto;
	padding: 0;
 }
.caption-clr{
	background-color: rgba(0,0,0,.1);
}

*{box-sizing: border-box;}


.main-wrapper{
	padding: 2.5% 10%;
	max-width: 100%;
	margin:  0 10%;
}
body,.main-wrapper{
	background-color: lightgreen;
}

header {
	color: white;
	text-shadow: 1px 0px 5px rgb(0,0,1);
	max-width: 100%;
	margin: auto;
	background-image: url(../img/cannabis.jpg);
	padding: 10%;
	background-size: cover;
	background-position: top;
}
p{
	border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 0 0 5px 0;
}
.opening-list li{
	font-weight: bold;
	list-style: none;
}

.opening-list li,.opening-list h3{
	color: white;
}

/**responsive**/

@media screen and (min-width: 550px){
	section {
		height: 45%;
	}
	body{
		background-color: lightgrey;
	}
	.first-right-section{
		float: right;
		margin: 2.5%;
		width: 45%;
	}
	.first-left-section{
		width: 45%;
		margin: 2.5%;
		float: left;
	}
	.clear{
		clear: both;
	}