justify-content( flex-end; right); property isn't working

Question

I want to move the NAV bar to the right and I am trying with the justify-content property, but it isn't working.

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  color: blanchedalmond;
}

.header {
  background-color: lightskyblue;
  width: 100%;
  height: 80px;
}

.innerheader {
  height: 100%;
  width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
}

.logo_nav h1 {
  font-weight: 200;
}

.logo_nav h1 span {
  font-weight: 900;
}

nav {
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

ul {
  display: flex;
  padding: 0px 100px 0px 240px;
}

ul a li {
  display: flex;
  color: blanchedalmond;
  font-size: 22px;
}

ul a {
  padding: 0px 100px 0px 20px;
}

<header class="header">
  <div class="innerheader">
    <div class="logo_nav">
      <h1>My <span>SITE</span></h1>
    </div>
    <nav class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Services</li>
        </a>
        <a href="#">
          <li>Hire us</li>
        </a>
      </ul>
    </nav>
  </div>
</header>

Thanks in advance for your replies.