JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
</header

CSS

header {
  background-color: blue;
    overflow:auto;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}