I am trying to center everything vertically inside the container of the navbar, called (header-area) such that everything is inline. At the moment the img, left navigation and right navigation are all aligned differently in the container. 

An alternative solution is welcome, too.

```css
/*-----Global Styles-----*/
html {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: 'HKGroteskRegular';
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*--------------Header-Navigation--------------*/

.header-area{
  position: relative; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 9999; 
  padding: 9px 97px 26px 98px;
  height: 105px;
  margin: 0 auto;
}

.logo-wrap{
  float: left;
  width: auto;
}

.main-logo{
  width: 212px; 
  float: left;
}

.main-logo a{
  float: left;
}

.main-logo img{
  width: 100%;
}

.main-nav{
  float: left;
  margin: 0;
}

.main-nav ul li{
  display: inline-block; 
  padding: 0 25px; 
  position: relative;
}

.main-nav ul li:after{
  position: absolute; 
  top: 50%; 
  right: 0; 
  width: 24px; 
  height: 2px; 
}

.main-nav ul li:last-child{
  padding-right: 21px;
}

.main-nav ul li:last-child:after{
  display: none;
}

.main-nav ul li a{
  color: #0c225f;
  padding: 2.5px 0;
  text-decoration: none;
  font-family: 'HKGroteskBold';
  font-size: 19px;
}

.header-right{
  float: right; 
  width: auto;
  display: flex;
  align-items: center;
}

.header-right a{
  vertical-align: middle;
  display: flex; 
  align-items: center;
  text-decoration: none;  
}

.phone {
  padding: 0 20px 0 10px;
}
```

```html
<!DOCTYPE html>
 <html lang="en">
 <head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
        <div class="logo-wrap">
            <div class="main-logo">
                <a href="#"><img src="Assets/logo.png" alt="pd-logo"></a>
            </div>
        </div>
        <div class="header-left">
            <nav class="main-nav">
                <ul id="menu-main-menu" class="menu">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Stories</a></li>
                    <li><a href="#">Career</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>                
            </nav>
            <div class="header-right">
                <a href="#">Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789</a>
            </div>
        </div>
</header>
</div>
</body>
</html>
```