Need help on Product landing page NavBar

1

I need help aligning the navbar. I have it fixed and would like to center the < li> elements but I am having problems doing so. I can change the width but there has to be a “correct” way other than eyeballing where it should be. For the life of me, I cannot find it and have been banging my head against this problem for 2 days. After searching the intertubes forever and rewriting and copying code I am here to place myself at your mercy. I want the < a> tag text to be centered horizontally and spaced evenly. I want to keep the icon pretty much where it is and might add some text, not sure. Please look if you can help.

Product Landing Page CodePen

HTML

<!DOCTYPE html>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="container" class="container">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width. initial-scale-1.0">
    <script src="https://kit.fontawesome.com/45fe8361ee.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
  </head>
  <div id="header" class="header">
    <header id="header">
      <div id="logo" class="logo">
        <i class="fad fa-violin fa-7x" style="--fa-secondary-color: #422D2E;" style="--fa-primary-opacity: "></i>
      </div>
      <nav id="nav-bar" class="nav-bar">
        <ul>
          <li><a class="nav-link" href="#My Desktop PC">My Desktop PC</a>
          </li>
          <li><a class="nav-link" href="#Pugs?">Pugs?<a/>
            </li>
          <li><a class="nav-link" href="#My Other Violins and instruments">My Other Violins and instruments</a>
            </li>
        </ul>
      </nav>
    </header>
  </div>

CSS

:root {
    --color-RAISIN_BLACK: #24231E;
    --color-LIGHT_MOSS_GREEN: #BBD8B3;
    --color-DEEP_LEMON: #F3B61F;
    --color-WENGE: #775253;
    --color-AMAZON: #3E885B;
    --color-CHAMPAGNE: #F2E8D0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Amatic SC', cursive;;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: black;
  margin: 0;
}
.container {
  display: flex; 
}
header {
  position: fixed;
  top: 0px;
  left: 0px;
  min-height: 0px;
  padding:10px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 2.5rem;
}

li {
  float: right;
  
}

li a {
  color: black;
  text-align: center;
  padding: 0px 20px;
  text-decoration: none;
}