* {
    margin: 0; padding: 0; box-sizing: border-box;
}

#container {

    border: solid red;
}

header {
    display: flex;
    flex-direction: column;
}

nav {
    background-color: green;
    flex-grow: 1;
    height: 10vh;
    justify-content: space-between;
}

ul {
    list-style: none;
}

li {
    display: inline-flex;
    padding: 0 1vw;

}

li a {
    text-decoration: none;
    color: black;
}

.banner {
    flex-grow: 1;
    background-color: red;
    height: 20vh;
}

main {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

main > div {
    flex: 1 0 30vw;
    height: 25vh;
}

.orange {
    background-color: orange;
}

.grey {
    background-color: lightgray;
}

footer {
    height: 15vh;
    background-color: darkgray;
}

@media (max-width: 768px) {
    li {
        display: flex;
        flex-flow: row wrap;
        flex-direction: column;
        flex: 1 0 30vw;
        background-color: rgba(0, 81, 0, 0.311);
    }

    nav {
        height: 100%;
    }

    ul li {
        width: 50%;
    }

}