JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
        <div class="container">
			<nav class="mega-menu">
				<ul>
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
				</ul>
			</nav>
		</div>
	</header>

CSS

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


/* custom css */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

* {
   margin:0;
   padding:0;
}

.mega-menu {
	margin-top: 32px;
	position: relative;
	z-index: 100;
	background-color: yellow;
	border: 1px solid black;
}
.mega-menu>ul {
	text-align: center;
}
.mega-menu>ul>li {
	display: inline-block;
	font-size: 13px;
	line-height: 15px;
	vertical-align: top;
	width: 25%;
}


.test-class {
	background-color: red;
	border: 1px solid blue;
}