Creio que já relataram aqui mas farei novamente o relato. A imagem não está cobrindo a largura inteira quando a tela está maximizada. Isso acontece apenas no firefox. Não sei se é um problema no firefox ou de css mesmo. Pois quando eu alterei o banner.css o comando:
.banner img {
max-width: 100%;
}
por
.banner img {
width: 100%;
}
Ele funcionou.
Imagem:
hoje, com a Alura e o Google Gemini
Olá, Leonardo! Tudo bem?
A propriedade max-width: 100%; no CSS significa que a largura máxima da imagem será 100% da largura do seu elemento pai. No entanto, se a imagem for menor que o elemento pai, ela não será esticada para preencher todo o espaço, mantendo assim o seu tamanho original.
Quando você alterou para width: 100%;, você está instruindo que a imagem deve preencher 100% da largura do elemento pai, independentemente do tamanho original da imagem. Isso pode fazer com que a imagem seja esticada para preencher todo o espaço, se ela for menor que o elemento pai.
Por isso, o código funcionou quando você fez a alteração.
Então, acredito que a questão não é um problema com o Firefox ou com o CSS em si, mas sim com a maneira como as propriedades max-width e width funcionam.
Espero ter ajudado e bons estudos!