Fel i layout

Följt instruktioner i läroboken men min sida blir inte samma som i boken, vart har jag gjort fel?

Såhär ska det se ut:

Och såhär är min kod, min footer är inte lika bred som headern och de gröna ränderna är borta samt att footern har försvunnit in i andra kolumnen:

@charset "UTF-8";
html {
    margin: 2%;
}
body
{
    margin: auto; /*sidan centreras*/
    max-width: 860px;
    font-family: sans-serif;
    font-size: 100%; /*startvärde*/
}
section, header, footer {
    outline: 1px solid red; /*provisorisk*/
    display: inline-block;
    width: 20%;
    margin-right: 4%;
}
header {
    text-align: center;
}
.startpage {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.startpage header,
.startpage footer {
    flex: 0 0 100%;
}
.startpage setion {
    flex: 0 0 22%;
}
.starpage h1 {
    font-size: 500%; /*gigantisk rubrik på startsidan*
}
.tagline { /*kantlinje*/
    font-size: 120%;
    padding: 0.5em; /*avstånd till kantlinjen(radhöjd)*/
    border-top: 3px double #00AF64;
    border-bottom: 3px double #00AF64;
    margin: 1em 0;
}
.menu > h2 {
    margin: 0 0 1em;
    padding: 2em 0;
    background-color: #F5F5F5; /*väldigt ljusgrå*/
    text-align: center;
}
footer {
    margin-top: 3em;
    text-align: center;
    color: #999;
}