#container {
display: grid;
grid-template-areas:
"header header header"
"content1 content2 content3"
"content4 content5 content5"
"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: lightblue;
}
.header h1 {
margin: 0;
padding-left: 30px;
}
.nav {
margin-left: 60%;
width: 40%;
display: flex;
justify-content: space-between;
background-color: lightyellow;
padding: 10px;
margin-top: 5px;
}
.content1 {
display: flex;
justify-content: center;
align-items: center;
grid-area: content1;
background-color: lightgreen;
}

.nav p {
margin: 0 10px;
background-color:lightgreen;
}
.content2 {
grid-area: content2;
background-color: lightcoral;
}
.content3 {
grid-area: content3;
background-color: lightgoldenrodyellow;
}
.content4 {
grid-area: content4;
background-color: lightpink;
}
.content5 {
grid-area: content5;
background-color: rgb(0, 103, 98);
}
.content6 {
grid-area: content6;
background-color: blueviolet;
}
.content7 {
grid-area: content7;
background-color: rgb(165, 160, 254);
}

@media (max-width: 768px) {
    #container {
        grid-template-areas:
            "header"
            "content1"
            "content2"
            "content3"
            "content4"
            "content5"
            "content6"
            "content7"
            "footer";
    }
}