Eu não sei porquê 100% é igual a Auto

Olá, Pedro! A sua pergunta é muito interessante, pois trata de um conceito fundamental quando estamos trabalhando com responsividade em CSS.

Então, vamos lá. Quando você define o width de um elemento como auto, você está basicamente dizendo ao navegador para calcular o tamanho do elemento baseado em outros parâmetros, como o conteúdo do elemento ou o tamanho dos elementos pais.

Por outro lado, quando você define o width como 100%, você está explicitamente dizendo ao navegador para fazer o elemento ocupar toda a largura disponível de seu elemento pai.

Agora, você pode estar se perguntando: "Mas não é a mesma coisa?". E a resposta é: nem sempre.

Vamos a um exemplo prático: imagine que você tenha um elemento pai com width: 500px e um elemento filho com width: auto. Se o conteúdo do elemento filho for menor que 500px, o tamanho do elemento filho será o tamanho do conteúdo, não 500px. Mas se você definir o width do elemento filho como 100%, o elemento filho terá 500px, independente do tamanho do conteúdo.

Na atividade que você está realizando, a alternativa correta é a A, onde o width é definido como 100%. Isso é muito comum em designs responsivos, pois garante que o elemento se ajuste à largura disponível, independentemente do tamanho da tela do dispositivo.

Espero ter ajudado e bons estudos!