HTML / CSS Navbar vertical-align issue - html

Question

I'm creating a child theme for WooCommerce's Storefront theme. My issue is with the navbar, where the navigation elements do not get centered horizontally. Please take a look at the code, as well as the image on the navbar. The navigation div has a background-color of red so it's easier to identify the issue.
Navbar Image
| JSFiddle with code
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
height: 70px;
line-height: 70px;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
height: 70px;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>

Answer 1

Pay attention to the fact that your inline-block elements are not aligned.
So I've aligned them vertically.
Another thing, is that you don't need the height:70px, instead define line-height: 70px, on the parent, it will propagate to the children.
.navbar {
line-height: 70px;
width: 100%;
border-bottom: 1px solid black; /* Change */
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
margin: 0;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>

Answer 2

I asume that you want the logo far left and the social icons far right. To achieve this I would use:
.logo {
float:left;
}
.icons {
float: right;
}
you could also use position absolute.
Now you have two options:
aligning the navigation elements center. To do this you have to set the navigation to text-align: center and display: block:
.navigation {
display: block;
margin-left: 0px;
text-align: center;
background-color: red;
}
You could give the .navbar a text-align: center:
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}