JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		
	<nav class="top-nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Home</a></li>
		</ul>	
	</nav>
    
    <h1>Why is the third box jumping down? surely 33+34+33 is 100 percent?</h1>
	
	<section class="col33pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>

		<section class="col34pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>

		<section class="col33pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>
	
	<h1>some head here</h1>
	
		<section class="col16pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>
	
		<section class="col33pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>
	
		<section class="col34pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>
	
			<section class="col16pc">
		<h1>Header here</h1>
		<p>Some text here and here and ere</p>
	</section>

CSS

* {
	box-sizing: border-box;
	
}


div#wrapper {
	width: 1140px;
}

section {
	margin:0;
}

.top-nav {
	margin: auto 0;
	text-align: center;
	background-color: black;
}

.top-nav li a {
	text-decoration: none;	
	font-family: Montserrat;
	color: white;
	padding: 0 20px 0 20px;
}

.top-nav li a:hover {
	color: black;	
	background-color: white;
}

nav li {
	display: inline;	
}

section.col34pc {
	padding: 10px;
	width: 34%;
	background-color: pink;
	display: inline-block;	
}

section.col33pc {
	padding: 10px;
	width: 33%;
	background-color: pink;
	display: inline-block;	
}

section.col16pc {
	padding: 10px;
	width: 16%;
	background-color: pink;
	display: inline-block;	
}