Need help on Product landing page NavBar

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


<!DOCTYPE html>
<script src=""></script>
<div id="container" class="container">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width. initial-scale-1.0">
    <script src="" crossorigin="anonymous"></script>
    <link href="" rel="stylesheet">
  <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>
      <nav id="nav-bar" class="nav-bar">
          <li><a class="nav-link" href="#My Desktop PC">My Desktop PC</a>
          <li><a class="nav-link" href="#Pugs?">Pugs?<a/>
          <li><a class="nav-link" href="#My Other Violins and instruments">My Other Violins and instruments</a>


: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;