No arquivo style.css tem que apagar a parte abaixo para que o projeto apresente o mesmo problema da aula, qual seja, a dificuldade de posicionar os cursos lado a lado, 4 por linha, separados por um espaçamento entre eles para não ficarem colados.
Percebemos que ao terminar de colocar a propriedade flex-wrap no .conteudoPrincipal-cursos, os cursos já ficam todos posicionados corretamente conforme o layout final do projeto, o que não deveria acontecer, pois na aula eles continuam grudados um no outro e posicionados errado.
Isso acontece por causa do código abaixo que está no final do arquivo style.css. Para resolver, é só comentar essa parte, que ele vai retirar a formatação e será possível acompanhar a aula com o projeto igual ao do professor.
/* @media(min-width: 769px) {
.container {
width: 85%;
}
.subtitulo {
text-align: left;
}
.cabecalhoPrincipal-nav-link {
border-radius: 5px;
border: 1px solid #9799A6;
}
.cabecalhoPrincipal-nav-link:hover {
color: #FFF;
background-color: #9799A6;
}
.cabecalhoPrincipal-titulo {
margin: 0;
}
.cabecalhoPrincipal-nav {
width: auto;
}
.cabecalhoPrincipal-nav-link {
width: auto;
margin: 0 0 0 10px;
}
.rodapePrincipal-contatoForm {
margin-top: 0;
text-align: left;
}
.conteudoPrincipal-cursos-link:nth-child(3n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(3n+1) {
margin-left: 0;
}
}
@media(min-width: 1000px) {
.conteudoPrincipal-cursos-link {
margin: 1.333%;
}
.conteudoPrincipal-cursos-link:nth-child(3n) {
margin-right: 1.33%;
}
.conteudoPrincipal-cursos-link:nth-child(3n+1) {
margin-left: 1.333%;
}
.conteudoPrincipal-cursos-link:nth-child(4n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(4n+1) {
margin-left: 0;
}
.videoSobre-sobre {
margin-left: 1.5em;
}
}
*/
Comente também a propriedade margin em:
.conteudoPrincipal-cursos-link {
height: 100px;
background-color: #FFF;
text-align: center;
/* margin: 1%; */
transition: .3s;
box-shadow: 2px 2px 2px #CCC;
position: relative;
}