<header class="header">
	<div class="container">
		<a class="header-brand" href="#">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/acme.svg" />
		</a>

		<div class="ad leaderboard">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90%402.png" alt="" />
		</div>
	</div>
</header>

<div class="container">
	<div class="ad billboard">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/970x250%402.png" alt="" />
	</div>
</div>

<div class="wrapper">
	<div class="container">
		<main class="main">
			<div class="markdown-body">
				<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut aliquam purus sit amet. Sed arcu non odio euismod lacinia. Sit amet cursus sit amet dictum sit amet justo. Ullamcorper morbi tincidunt ornare massa eget egestas. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Dolor sit amet consectetur adipiscing elit ut aliquam purus sit. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Nec nam aliquam sem et tortor consequat id. Hendrerit dolor magna eget est lorem ipsum dolor sit.</p>

				<p>Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Elementum sagittis vitae et leo duis ut diam. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Purus in massa tempor nec feugiat nisl pretium fusce. At volutpat diam ut venenatis tellus in. Tortor condimentum lacinia quis vel eros donec. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Blandit cursus risus at ultrices mi tempus imperdiet. Interdum consectetur libero id faucibus. Arcu odio ut sem nulla. Maecenas pharetra convallis posuere morbi leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Orci nulla pellentesque dignissim enim sit. Orci a scelerisque purus semper eget duis. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Augue lacus viverra vitae congue eu.</p>

				<p>Quam adipiscing vitae proin sagittis nisl rhoncus mattis. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Nunc mattis enim ut tellus elementum sagittis vitae et. Tincidunt lobortis feugiat vivamus at augue. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Amet consectetur adipiscing elit duis tristique. Nunc sed blandit libero volutpat sed cras ornare. Pulvinar elementum integer enim neque volutpat ac. Dapibus ultrices in iaculis nunc sed augue lacus viverra. Enim lobortis scelerisque fermentum dui faucibus in ornare. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Enim tortor at auctor urna nunc id. Erat nam at lectus urna duis convallis convallis tellus id. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Ut ornare lectus sit amet est placerat.</p>

				<p>Pharetra convallis posuere morbi leo urna molestie. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Turpis egestas sed tempus urna et pharetra pharetra massa. Semper quis lectus nulla at volutpat diam ut. Tellus at urna condimentum mattis pellentesque. Mauris commodo quis imperdiet massa tincidunt. Ut tellus elementum sagittis vitae et leo. Egestas purus viverra accumsan in nisl. Vel facilisis volutpat est velit. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Nam libero justo laoreet sit amet cursus sit. Purus sit amet volutpat consequat mauris. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Consectetur a erat nam at lectus urna duis convallis convallis. Odio morbi quis commodo odio aenean sed adipiscing. Pretium lectus quam id leo in.</p>

				<p>Lobortis feugiat vivamus at augue eget arcu dictum. Id consectetur purus ut faucibus pulvinar elementum. Amet mauris commodo quis imperdiet massa tincidunt nunc. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. In fermentum et sollicitudin ac. Senectus et netus et malesuada fames. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Mus mauris vitae ultricies leo integer malesuada nunc. Nibh mauris cursus mattis molestie a iaculis at erat. Dignissim cras tincidunt lobortis feugiat vivamus.</p>
		</main>
		<aside class="sidebar">
			<div class="markdown-body">
				<h3>Popular articles</h3>
				<ul>
					<li><a href="#">blandit libero volutpat sed cras</a></li>
					<li><a href="#">facilisi etiam dignissim diam quis</a></li>
					<li><a href="#">velit aliquet sagittis id consectetur</a></li>
					<li><a href="#">faucibus scelerisque eleifend donec pretium</a></li>
					<li><a href="#">et pharetra pharetra massa massa</a></li>
				</ul>
				
				<h3>Latest articles</h3>
				<ul>
					<li><a href="#">rhoncus urna neque viverra justo</a></li>
					<li><a href="#">augue neque gravida in fermentum</a></li>
					<li><a href="#">egestas sed tempus urna et</a></li>
					<li><a href="#">ipsum dolor sit amet consectetur</a></li>
				</ul>
			</div>
		</aside>
	</div>
</div>
</div>

.container {
	margin: 0 auto;
	width: 970px;
	font-family: sans-serif;
}

.header {
	padding: 16px 0;
}

.header .container {
	/* Avoid content jumping */
	height: 90px;
	/* Flexibility */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.leaderboard {
	width: 728px;
	height: 90px;
}

.billboard {
	width: 970px;
	height: 250px;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

.header-brand {
	width: 130px;
}

.wrapper {
	margin: 40px 0;
}

.wrapper .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
	grid-gap: 24px;
}

.markdown-body ul {
	list-style-type: circle !important;
}