Não consegui o resultado no layout, exatamente como estava na imagem, com os códigos da videoaula. Consegui, entretanto, com os códigos abaixo, sem necessidade de mexer no style.css:
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link {
max-width: 20vw;
width: 19vw;
flex-grow: 1;
margin: 0.5vw 0.5vw 0.5vw 0.5vw !important;
}
Caso seja necessário usar valores inteiros na propriedade margin, basta reduzir também um ponto inteiro das propriedades max-width e width:
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link {
max-width: 19vw;
width: 18vw;
flex-grow: 1;
margin: 1vw 1vw 1vw 1vw !important;
}
Viewport é o tamanho efetivo da janela do navegador e vw é o percentual dessa medida (vh é a altura, mesma lógica).
Como fugimos um pouco do flexbox por uma simples limitação da propriedade, achei que não seria danoso usar outra forma de resolver, desde que fugindo de pixels arbitrários.
Posso considerar a solução correta?
Obrigado!