Cacher is the code snippet organizer for pro developers

* {
  margin:0;
	padding:0;
	line-height:1em;
	font-size:100%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	}
header {
    text-align: justify;
    letter-spacing: 1px;
    height: 6em;
    padding: 2em 10%;
    background: #2c3e50;
    color: #fff;
}
header > div,
header h1,
header nav {
    display: inline-block;
}
header::after,
header:after  {
    content: '';
    display: inline-block;
    width: 100%;
	vertical-align:middle;
}
header h1 {
	 height: 100%;
	 }
header > div::before {
    content: '';
    display: inline-block;  
    vertical-align: middle;
    height: 100%;
}
header > div {
    width: 50%;
    height: 100%;
    text-align: left;
}
header li {
	display:inline-block;
	margin:0 1em;
	}
	
@media screen and (max-width: 820px){
     
    header {
        height: auto;
    }
     
    header > div,
    header > div h1,
    header nav {
        height: auto;
        width: auto;
        display: block;
        text-align: center;
    }
     
}

<header>
<div><h1>Titolo del sito fighissimo yeah </h1></div>
<nav>
  <ul>
		<li>olè olè</li>
		<li>olè olè</li>
		<li>olè olè</li>
		<li>olè</li>
	</ul>
</nav>
</header>