JSFiddle - React, Tailwind, and code Playground

HTML

<body>
			<center>
	<div class="wrapper">
		<header>
			<h1>Yoko's kitchen</h1>
			<nav>
				<ul>
					<li>classes</li>
					<li>catering</li>
					<li>about</li>
					<li>contact</li>
				</ul>
			</nav>
		</header>

		<div class="courses">
				<figure>
					<img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="150px" width="150px" />
					<figcaption>Bok choi</figcaption>
				</figure>
		</div>
		<div class="courses">
            <p>This is some awesome food</p>
			</div>

	</div>
</center>
</body>

CSS

body{
	background-color: gray;
}
.wrapper{
	background-color: white;
	width: 85%;
	border: 2px solid black;
	text-align: center;
    overflow: hidden
}
nav{
	background-color: gray;
}
nav ul{
	padding: 5px 0px 5px 30px;
}
nav li{
	display: inline-block;
	width: 20%;
	color: white;
}
header{
	display: block;
	text-align: left;
	background-color: black;
}
header h1{
	color: white;
	margin-left: 10px;
}
.courses{
	float: left;
}
figure{
	width: 40%;
}