Vertically aligning elements in parent div - css

Question

I am having an issue with elements not vertically aligning in the middle of it's parent div.
CSS:
/* Main body structure */
body{
font-size:0.5em;
}
.main-wrapper {
width: 90%;
margin: auto;
background-color: #efefef;
}
* {
box-sizing: border-box;
}
/* Main header/logo/navigation structure */
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav, {
display: table-cell;
vertical-align: middle;
}
.main-logo,
.main-nav li {
padding: 10px 20px;
border-radiues: 5px;
background-color:#3CC;
}
.main-nav li {
margin-right: 10px;
display:inline-block;
}
.main-logo {
background-color:#3F6;
}
.main-nav {
padding: 10px;
}
.main-logo a,
.main-nav a {
color: #FFF;
text-decoration:none;
display:block;
text-align:center;
padding: 10px 20px;
}
#media ( max-width: 768px) {
.maing-logo,
.main-nav,
.main-nav li {
display:block;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: initial;
}
HTML:
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo">logo</h1>
<div class="main-nav">
<ul class="main-nav">
<li>HOME</li>
<li>SEARCH</li>
<li>MESSAGES</li>
<li><a href=logout.php>LOGOUT</a></li>
</ul>
</header>
</div>
So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements?

Answer 1

if you use display:table; , you should use height and not min-height . Behavior of this display rule will do that the element will expand to fit its content anyway.
You have an extra , , that kills you rule .
correct is :
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
/*min-*/height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav/* , */ {
display: table-cell;
vertical-align: middle;
}