JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
								<div id="nav">
					<div>
						 <li class="page_item page-item-2237"><a href="http://joshrodg.com/new/">Home</a></li>
<li class="page_item page-item-2236"><a href="http://joshrodg.com/new/about/">About</a></li>
<li class="page_item page-item-2238"><a href="http://joshrodg.com/new/portfolio/">Portfolio</a></li>					 </div>
					 <div>
						 <a href="http://joshrodg.com/new"><img src="http://joshrodg.com/new/wp-content/themes/daisyprieto/images/logo.png" alt="Logo" title="Logo"></a>
					 </div>
					 <div>
						 
<li class="page_item page-item-8 page_item_has_children current_page_item"><a href="http://joshrodg.com/new/booking/" aria-current="page">Booking</a></li>
<li class="page_item page-item-2239"><a href="http://joshrodg.com/new/pricing/">Pricing</a></li>
<li class="page_item page-item-2240"><a href="http://joshrodg.com/new/contact/">Contact</a></li>					 </div>
				 </div>
			</ul>

CSS

/* Nav */
#nav {
	display: flex;
	text-align: center;
	width: 100%;
}

#nav div {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
}

#nav div li {
	flex: 1;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 5px;
	text-transform: uppercase;
}

#nav div li.current_page_item a {
	font-weight: 400;
}

#nav div li.current_page_item a,
#nav div li a:hover {
	border-bottom: 1px solid #4a5f73;
}

#nav div a {
	border-bottom: 1px solid transparent;
	color: #4a5f73;
	padding: 0 5px 5px 10px;
	text-decoration: none;
}

#nav div img {
	height: auto;
	margin: 0 auto;
	max-width: 450px;
	width: 100%;
}

@media screen and (max-width: 1200px) {
	#nav {
		flex-direction: column;
	}
	#nav div li {
		padding: 20px 0;
	}
}

@media screen and (min-width: 1199px) {
	#nav div li {
		padding: 65px 0 30px;
	}
}














html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}