Minha solucao para atividade proposta foi diferente. Eu mexi somente no .navegacao-site utilizando flexbox e cheguei a este resultado:
.navegacao-site {
width: calc(0.9 * 300px);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex: 1;
padding-top: calc(300px + 1rem);
}
.navegacao-site h1 {
flex-basis: 100%;
}
.navegacao-site nav {
flex-basis: 100%;
}
.navegacao-site ul {
flex-basis: 100%;
}Ao ver a solucao do instrutor, eu apliquei ela e isto quebrou o layout do .navegacao-site na qual apliquei o flexbox. Porque isto ocorreu?