html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
.header{background-color:#F3F2ED;}
.header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
.container{text-align:left}
.content p{line-height:1.4}
.navigation{background:#F6F0E0;}
.navigation ul{margin:15px 0; padding:0; list-style-type:none;}
.navigation li{margin-bottom:5px;}
.extra{background:#CCC8B3;}
.footer{background:#BFBD93;}
.footer p{margin:0;padding:5px 10px}


.wrapper{float:left;width:100%}
.content{margin: 0 150px}
.navigation{float:left;width:150px;margin-left:-700px}
.extra{float:left;width:150px;margin-left:-150px}
.footer{clear:left;width:100%}

.container{
    width: 90%;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
}
.demi{
    display: flex;
    width: 50%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding:15px;
}