JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<ul class="ul_header">
		<li><a href="index.html">Один</a></li>
		<li><a href="index.html">Два</a></li>
		<li><a href="index.html">Три</a></li>
		<li><a href="index.html">Четыре</a></li>
	</ul>
	<ul class="ul_header_right">
		<li><a href="index.html">Пять</a></li>
		<li><a href="index.html">Шесть</a></li>
	</ul>
</div>


<div class="content">
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>

</div>

CSS

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
}

h1 {
  margin: 0;
  padding: 40px;
  font-weight: 400;
  color: #4c5d6e;
}



#header{
position: fixed;
width: 100%;
font-size: 15px;
font-weight: 400;
height: 60px;
line-height: 60px;
border-bottom: solid 4px black;
}

.ul_header{
margin:0;
padding-left: 300px;
float: left;
}

.ul_header li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}

.ul_header_right{
  margin:0;
  float: right;
}

.ul_header_right li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}

.content{
  margin-top: 100px;
  text-align: center;
}