JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</body>

CSS

body {
  margin: 0 auto;

  font-family: Helvetica, Arial;

}

#wrapper {
  position: relative;
  z-index: 0;
  max-width:300px;

}

#navigation {
  position: fixed;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  border: 1px solid red;
}

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 1rem;
}

#navigation li {
  float: right;
  padding:0px 2px 0px 2px;
}