HTML-элементы не выровнены вертикально по центру

Question

Я пытаюсь выровнять два html-элемента, текст логотипа и панель навигации, вертикально по центру, которые находятся внутри заголовка. Однако, если вы посмотрите внимательно, они не обеспечивают точное выравнивание для двух элементов, так как один элемент кажется выровненным на несколько пикселей выше середины двух элементов. Может ли кто-нибудь помочь мне получить точное выравнивание по центру этих элементов?

body {
    margin: 0;
}

.main-header {
    background-color: #0a0a0a;
    color: #ffffff;
    padding: 8px 25px;
    text-align: middle;
    border-bottom: 2px solid #df802e; 
}

.main-header_brand {
    display: inline-block;
    font-size: 1.5rem;
    text-align: right;
    vertical-align: middle;
}

.main-header_brand a {
    display: inline-block;
    text-decoration: none;
    color: #f1f1f1;
}

.main-header_brand a span {
    color: #df802e;
}

.main-header_navbar {
   display: inline-block;
   width: calc(100% - 180px);
   text-align: right;
   vertical-align: middle;
}

.main-header_navlinks li {
    display: inline-block;
    margin-left: 20px;
}

.main-header_navlinks li a {
    text-decoration: none;
    color: #f1f1f1;
}

.main-header_navlinks li a:hover {
    color: #df802e;
}

<header class="main-header">
  <div class="main-header_brand"><a href="index.html">MY<span>BRAND</span></a></div>
  <nav class="main-header_navbar">
     <ul class="main-header_navlinks">
       <li><a href="#about">ABOUT MYBRAND</a></li>
      <li><a href="#how">HOW CALCULATOR WORKS</a></li>
    </ul>
  </nav>
</header>

Answer 1

Из того, что вы показали нам, эти элементы на самом деле кажутся мне вертикально выровненными. Я имею в виду, что они на пару пикселей выше и ниже в середине - что и следовало ожидать, поскольку их высоты различны.

Может быть, вы хотите что-то похожее на второй пример здесь?

В этом случае я бы предложил вам отказаться от вертикального выравнивания и просто установить вместо него padding-bottom их родительского элемента.