Olá! Apenas uma dúvida quanto a disposição dos itens no CSS. Pelo que o professor havia dito, os itens no CSS devem seguir a disposição do HTML. Sendo assim, o #banner e o . titulo-principal não deveriam estar invertidos? Fiz desta forma:
body {
}
.titulo-principal {
padding: 20px;
}
#banner {
width: 100%;
}
.principal {
background: #CCCCCC;
padding: 30px;
}