header

placeholder

general layout

html, body {
margin: 0;
padding: 0;}
body {
width: 70%;
min-width: 800px;
margin: 0 auto;}
main, header, nav, article, aside, footer, section {
padding: 1%;

header layout

header {
display: flex;
flex-flow: row wrap;}
h1 {
flex: 5;}
header img {
display: block;
height: 60px;
padding-top: 20.15px;}

nav layout

nav {
height: 50px;
flex: 100%;
display: flex;}
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;}
nav li {
display: inline;
text-align: center;
flex: 1;}
nav a, nav span {
display: inline-block;
text-decoration: none;
color: black;}

main layout

main {
display: flex;}
article, section {
flex: 4;}