JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="container"> <!--контейнер в который мы обворачиваем все содержимое-->
		<header>
			<h1>Galvanize</h1>
			<nav>
				<ul class="topmenu">
					<li>
						<a href="#" class="active">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
					<li>
						<a href="#">Пункт</a>
					</li>
				</ul>
			</nav>
		</header>
	</div>
</body>

CSS

body{
	background:url("../images/bg.png") repeat;
	font-family: Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
}

div, h1, h2, h3, h4, p, form, label, input, textarea, img, span {
	margin:0; 
	padding:0;
}

ul {
	margin:0; 
	padding:0;      
					/*убирам отступы между display: inline(один ряд)/inline-block(один ряд блоков, которому можно задавать width, height)*/
	    			/*убираем отступы сверху или снизу относительно родителя, проблема появляется в браузерах Opera*/
	list-style-type:none;
}
				/*------- Шапка сайта и меню ----------*/
header{
	background: linear-gradient(180deg, #4A5D9E 50%, #4D5B89 51%, #455488 100%);
}

header:after{
	content:"";
	display: table;
	clear:both;
}


h1{
	color:#FFF;
	float:left;
}

nav{
		float:right;
}

.topmenu {
	list-style-type:none;
	padding:15px 15px;
}

.topmenu li{
	float:left; /*присваем каждому li автоматически блочное значение и смещенние в лево*/
}

.topmenu a{
	background: url("../images/bg_item.png") no-repeat right center;
	color:#FFF;
	padding: 10px 15px;
	text-decoration: none;
	
}

.topmenu a.active, .topmenu a:hover{
	background-color: #697CBA ;
	border:2px solid #FFF;
	padding: 8px 13px;
	border-radius:3px;
}