Dúvida de cross-browser e código no rodapé

De qualquer modo vou deixar o código CSS que está sendo utilizado nas prints.

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    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;
    height: 250px;
}

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
    margin: 1%;
}

.conteudoPrincipal-cursos-link {
    width: 23%;
}

.conteudoPrincipal-cursos-link:nth-child(4n) {
    margin-right: 0;
}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-left: 0;
}

/* Mobile  */
@media (max-width: 768px){
    .cabecalhoPrincipal-nav {
        flex-direction: column;
    }

    .cabecalhoPrincipal .container {
        align-items: initial;
        flex-direction: column;
        text-align: center;
    }

    .conteudoPrincipal-cursos {
        flex-direction: column;
    }

    .conteudoPrincipal-cursos-link {
        width: 100%;
        margin: 1% 0;
    }

    .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 {
        text-align: center;
        justify-content: center;
    }
}

O html não foi modificado.

Acredito que uma das minhas dúvidas tenha sido respondida em algumas uma das aulas posteriores, no video: https://cursos.alura.com.br/course/posicione-elementos-com-flexbox/task/22655

Onde ele explica que se os elementos não aceitam diminuir além do mínimo, o navegador automaticamente da "zoom out" na página, inclusive salienta que não é recomendado. Que é exatamente o que estava acontecendo com o Chrome em uma das minhas dúvidas acima.

Entretanto a dúvida do Firefox centralizado permanece e a dúvida do por que no Firefox o elemento se comporta daquela forma.

Alisson, boa tarde!

Essa é uma ótima observação, daria para falar horas sobre o assunto. Cada navegador possui uma engine (um código) que lida com os arquivos que você entrega pra ele, em geral eles tendem a usar os mesmos padrões para algumas coisas. Mas, existem detalhes que são renderizados de formas diferentes dependendo do navegador, isso pode ocorrer por eles não darem suporte, ou porque eles dão suporte limitado a uma funcionalidade. Para que isso não ocorra no CSS nós geralmente usamos 2 arquivos que limpam o CSS e fazem normalizações entre eles. Esses são:

• Reset CSS
• Normalize

(E geralmente são importados nessa mesma ordem que eu te passei). O teste definitivo para esses casos é usar diretamente no ambiente que você deseja testar, claro que não dá pra ter todos os celulares em casa kkkkk, mas testar de fato como ele fica no seu celular diretamente já dá uma boa ideia.

Veja que se você colocar o seu css no site https://autoprefixer.github.io/ vai ver que ele irá fazer um css cross browser e pode corrigir o seu problema

Caso tenha tirado sua dúvida, marque como solucionado para alcançar mais alunos!

Espero ter ajudado e bons estudos!

Bom dia Felipe,

Isso foi muito útil de verdade, principalmente o link de autoprefixer, eu imaginei que fosse algo desse estilo porem eu queria confirmar com alguém com mais experiência que eu. Isso irá me ajudar muito em códigos futuros. Muito obrigado!

Na minha dúvida de centralização de elementos/texto ela se corrige se você por nesse mesmo site, onde ele adiciona 'web-kits' do firefox em componentes de posicionamento. Novamente agradeço a resposta completa :)