Center li of nav bar vertically

Question

As you can see the menu points are not centered vertically like the social media points, could someone please tell me how to do that, it's the first page I am working on. I would also like to scale down the space between the social media links, would be very grateful if someone could help me!

.menu-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #262a2b;
  text-decoration: none;
  height: 45px;
}

#social-media {
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}

.menu-link:hover {
  color: #0088a9;
}

.active-menu-links {
  color: white;
}

#normal-header {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  font-size: 19px;
  min-height: 100px;
}

#header-img {
  height: 110px;
  padding-top: 20%;
  padding-bottom: 20%;
  margin-left: 20%;
}

#nav-bar {}

#nav-bar ul {
  list-style: none;
  display: flex;
  flex-flow: row;
}

#nav-bar li {
  padding: 10px;
  margin: 12px;
}

#nav-bar ul,
a {
  text-decoration: none;
}

<nav id="nav-bar">
  <ul>
    <li class="nav-link" id="menu-item"><a href="#hero-header" class="menu-link"> Home </a></li>
    <li class="nav-link" id="menu-item"><a href="#features-container" class="menu-link"> About </a></li>
    <li class="nav-link" id="menu-item"><a href="#presentation-container" class="menu-link"> Roadmap </a></li>
    <li class="nav-link" id="menu-item"><a href="#main-media-container" class="menu-link"> Ecosystem </a></li>
    <li class="nav-link" id="menu-item"><a href="#prices-section-container" class="menu-link"> Team </a>
      <li>

        <li>
          <a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Instagram"></a>
        </li>
        <li>
          <a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Twitter"></a>
        </li>
        <li>
          <a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Discord"></a>
        </li>
        -->
  </ul>
</nav>

I hope someone can help me. Thanks in advance!

Answer 1

So, I can't identify your problem because the snippet not working well as missing of files

But you can try to add align-items: center; to the #nav-bar ul selector

Or you can add display: flex align-items: center; to the #nav-bar li