#container{
display: grid;
grid-template-areas:
"header header header"
"content1 content2 content3"
"content4 content5 content3"
"content6 content6 content7"
"footer footer footer";
grid-auto-rows: 120px;
gap: 8px;

}

.header{
display: flex;
flex-direction: row;
flex-flow: reverse;
align-items:center;
grid-area:header;
background-color: #f8b400;
}
.nav{
    margin-left: 60%;
    width: 40%;
    display:flex;
    justify-content: space-between;
    background-color: lightyellow;
    padding: 10px;
    margin-top: 5px;
}

.content1{
    grid-area: content1;
    background-color: lightgreen;
}

.content2{
    grid-area: content2;
    background-color: lightblue;
}

.content3{
    grid-area: content3;
    background-color: lightcoral;
    display:flex;
    justify-content: center;
    align-items: center;

}

.content4{
    grid-area: content4;
    background-color: lightgoldenrodyellow;
}

.content5{
    grid-area: content5;
    background-color: lightpink;
}

.content6{
    grid-area: content6;
    background-color: lightgray;
}

.content7{
    grid-area: content7;
    background-color: lightsteelblue;
}

.footer{
    grid-area: footer;
    background-color: lightcyan 
}