Centering and Resizing my <a> links

      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About</a></li>
          <li><a href="pages/news.html">News</a></li>
          <li><a href="pages/ducklection.html">Ducklection</a></li>
          <li><a href="pages/ascension.html">Accened Duckies</a></li>
          <li><a href="pages/goose.html">Goose Lore</a></li>
        </ul>
      </nav>

nav {
  width: 100%; height: 20%;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

 nav ul {
  width: 80%; height: 80%;
  background: orangered; 
  margin: 0; padding: 0;   
  list-style-type: none; 
} 
nav li {
  height: 100%;
  background: orange;   
  display: inline-block;
}  
nav a {
  background: white;
  color: black;
  text-decoration: none;
}