Após seguir todos os passos da aula o meu projeto ficou semelhante ao do professor, porém o background cinza (da classe principal) estava encostando no banner. Para solucionar esse problema optei por usar o margin-bottom:1%, só para um não ficar encostando no outro (que nem no projeto do professor) e deu certo. Gostaria de saber se está correto desta forma, e se mais pra frente posso ter algum problema ao encaixar os elementos na página, tendo em vista que o professor não fez isso em aula, mas foi a única forma que encontrei de solucionar o devido problema.
body {
}
#banner {
width: 100%;
margin-bottom: 1%;
}
.principal {
background: #cccccc;
padding: 30px;
}
h1 {
text-align: center;
}
#missao {
font-size: 20px;
}
p {
text-align: center;
}
em strong {
color: #FF0000;
}
h2 {
text-align: center;
}
.itens {
font-style: italic;
}
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.beneficios {
background: #ffffff;
padding: 20px
}
.imagembeneficios {
width: 50%;
}