My nav bar items squashed together! Why?

[ailanthus]

I’m struggling to separate my nav bar items; they are clinging together. I’ve tried to increase padding and justify-content: space-evenly, but neither has affected the problem. I’m working on Build a Product Landing Page

#nav-bar {
	      display: flex;
        flex-direction: row;
        list-style-type: none;
        overflow: hidden;
        justify-content: space-evenly;
        background-color:#4BB7FF; 
        margin-bottom: 5px;
        width:100%; 
        position: fixed;
        z-index:1;
        align-items: center;
      }

      .menu {
        position: fixed;
        transform: translateY(-100%);
        transition: transform 0.2s;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: black;
        color: white;
        list-style-position:  none;
        padding-top: 4rem;
        justify-content: space-between;
      }

      .showMenu {
        transform: translateY(0);
      }
}

.menuItem {
     
      list-style-type: none; 
      display: flex;
      flex: auto;
      flex-direction: row;
      color: #4BB7FF
      padding-top: 25px;
      font-weight:500;
      text-decoration: none;
      justify-content: space-between;
      align-items: center;

     }
      a:hover {
      color: orange;
      text-decoration: none;
        
      }

      a:visited {
      color: black;
      background-color: transparent;
      text-decoration: none;
      }

[ailanthus]

Yes, here’s the link to the Github repo. I’m super new to coding; thank you for any help.

[ailanthus]

Apologies; I just made it public.