Solucionado
O CSS conforme explicado na aula funciona perfeitamente no Chrome, mas no Firefox os conteúdos da listas permancem com as margens laterais, porém as de baixo somem e com isso uma linha se junta a outra.
.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;
}hoje, com a Alura e o Google Gemini
Oi Fernanda! Puts é verdade, o Firefox está bugando com o margin-bottom. Faz assim, troca para em vez de % usar px apenas na margin-bottom. 10 px resolve!
Abraço!
Na verdade, acredito que seja um bug no Chrome, uma vez que dentro de um container flex o percentual de um margin ou padding deve ser dado em relação ao tamanho do container pai.
Como a altura da div .conteudoPrincipal-cursos é zero , o percentual resolve para 0.
Caso a altura da div .conteudoPrincipal-cursos seja setada para digamos 600px, teremos uma margin top e bottom de 6px se utilizarmos um percentual de 1% na margin.
Mais detalhes sobre o bug pode ser encontrado aqui:
https://bugs.chromium.org/p/chromium/issues/detail?id=229568
[Atualizando]
Aparentemente é uma guerra fria entre os browsers:
https://bugzilla.mozilla.org/show_bug.cgi?id=958714
A solução do Chorme, na minha visão, é melhor para os desenvolvedores. Mas ainda não é compatível com todos os navegadores (Firefox/Edge) setar a margin-bottom para um valor definido é o mais recomendável se é desejado que seu site seja visualizado de forma correta na maioria dos navegadores.