how to move a text to the right side of the page-CodePudding

I'm trying to move the navbar contents to the right side of the page but it's not aligning with the navbar title.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica;
}
header li {
    list-style: none;
    float: right;
    display: inline;
    padding: 20px;
   padding-left:3px;
}
header {
  justify-content: space-between;
  align-items: center;
   box-shadow: 0 1px 8px #ddd;
  
}

<header>
<h1> Dev101 </h1>
  <nav>
 <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
 </ul>
  </nav>
 </header>

CodePudding user response：

You can add a float to the nav:

header h1 {
  display: inline-block;
}
nav {
  float: right;
}