problem with different right border height

Issue

I have problem with height of one of right border in navigation menu. I know that is because of emoji that I use in that problematical case, because without the red_circle emoji everything is the same. The border has full height only for "LIVE :red_circle:" and I want to every right border look like that. I set margin value to 0, but it doesn't work. Only deleting the emoji solves the problem, but it doesn't what I want.

nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner"></div>
  
  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

Solution

Target the anchor element and add a line-height to it

nav li a {
    line-height: 100%;
}

nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li a {
  line-height: 100%;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner"></div>

  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

Answered By - X8inez