JSFiddle - React, Tailwind, and code Playground

HTML

<header class="navbar">
    
    <div class="container">
        
        <h1 class="brand"><a href="#">Brand</a></h1>
        
        <ul class="main-nav pull-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
            <li><a href="#">Page 6</a></li>
        </ul>
        
        
    </div><!-- end container -->
    
</header><!-- end navbar -->

<div class="clearfix"></div>

CSS

/* Import files */
@import url(normalize.css);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:400,700);

/* Main
-------------------------------------------- */
body {
	font-family: 'Noto Serif', 'Helvetica Neue', Helvetica, Arial, serif;
	line-height: 1.5;
	color: #333;
	background-color: #eee;
}

.container {
	margin: 0 auto;
	width: 980px;
}

.clearfix { clear: both; }

.pull-left { float: left; }

.pull-right { float: right; }

/* Typography
-------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	letter-spacing: -1px;
}

h1 { font-size: 36px; }

h2 { font-size: 30px; }

h3 { font-size: 24px; }

h4 { font-size: 18px; }

h5 { font-size: 14px; }

h6 { font-size: 12px; }

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid #fff;
}

/* Navbar
-------------------------------------------- */
.navbar {
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #fff;
	background-color: #303538;
}

.navbar .brand {
	display: inline-block;
}
/*
ul.main-nav {
    margin-top: 42px; rozwiązuje problem, ale czy to najlepsze rozwiązanie?
}*/

.main-nav li {
	padding-left: 25px;
	display: inline;
}