Meu CSS tá da seguinte forma:
.cabecalhoPrincipal .container {
align-items: center;
display: flex;
justify-content: space-between;
}
.cabecalhoPrincipal-nav {
display: flex;
}
.rodapePrincipal-patrocinadores .container {
display: flex;
justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list {
display: flex;
align-items: center;
justify-content: space-around;
width: 70%;
margin-right: 5%;
}
.rodapePrincipal-contatoForm {
width: 25%;
}
.rodapePrincipal-contatoForm-fieldset {
display: flex;
}
.rodapePrincipal-navMap-list {
display: flex;
flex-flow: column wrap;
/*flex-direction: column;
flex-wrap: wrap;*/
height: 255px;
}
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link {
width: 23%;
margin: 1%;
}
.conteudoPrincipal-cursos-link:nth-child(4n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(4n+1) {
margin-left: 0;
}
/*mobile*/
@media screen and (max-width: 768px) {
.cabecalhoPrincipal-nav {
flex-direction: column;
}
.cabecalhoPrincipal .container {
flex-direction: column;
align-items: initial;
text-align: center;
}
.conteudoPrincipal-cursos {
flex-direction: column;
}
.conteudoPrincipal-cursos-link {
width: 100%;
}
.rodapePrincipal-navMap-list {
height: auto;
}
.rodapePrincipal-patrocinadores .container {
flex-direction: column;
align-items: center;
}
.rodapePrincipal-patrocinadores-list {
margin: 0;
width: 100%;
}
.rodapePrincipal-contatoForm {
width: 100%;
}
.rodapePrincipal-contatoForm-fieldset {
justify-content: center;
}
}
Eu repassei o vídeo algumas vezes e me parece idêntico ao mostrado durante a aula. Ainda assim, a visualização no browser me apresenta da seguinte forma: http://i.prntscr.com/7rL3C56CQXSaJEaV1zDIzw.png O texto não está centralizado tal como deveria, e mesmo aplicando text align no item nada muda. Além disso, a lista de patrocinadores, mesmo estando com 100% de largura, parece ocupar mais que isso, estendendo-se. Help?