HTML elements do not align vertically to the middle properly - html

Question

I'm trying to align two html elements, logo text and the navigation bar, vertically to the middle that are inside the header. However, if you look closely, they don't provide the exact alignment for the two elements, as one element seems to be aligned few pixels above the middle of two elements. Can anyone help me out to get the accurate alignment to the middle of these elements?
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">MY<span>BRAND</span></div>
<nav class="main-header_navbar">
<ul class="main-header_navlinks">
<li>ABOUT MYBRAND</li>
<li>HOW CALCULATOR WORKS</li>
</ul>
</nav>
</header>

Answer 1

From what you showed us, these elements actually do seem vertically aligned to me. I mean, they are a couple of pixels above and below the middle - which is to be expected as their heights are different.
Maybe what you want is something more like the second example here?
In this case, I would suggest you to drop the vertical alignment and simply set the padding-bottom of their parent element instead.