<!DOCTYPE html> 
<html> 
  <head>
    <title> Nav Bar</title>
  </head>
  <body>
    <header>
      <nav> 
        <ul>
          <li id="title"><a href="#">Nav Bar Tutorial</a></li>
          <li><a href="#">Tab </a></li>
          <li><a href="#">Tab </a></li>
          <li><a href="#">Tab </a></li>
        </ul>
      </nav>
    </header> 
  </body>
</html>

body {
  margin: 0px;
}

header {
  background-color: #F5A281;
  width: 100%;
  height: 70px;
}

ul {
  display: flex;
  list-style-type: none;
  font-size: 20px;
  justify-content: flex-end; 
  margin: 0px; 
}

li {
  margin: 20px;
  font-family: Arial;
}

#title {
  margin-right: auto;
}


li a {
 color: black;
 text-decoration: none; 
}

li a:hover {
  text-decoration: underline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.