Uma das minhas maiores dificuldades na programação é o fato de diversas ferramentas serem utilizadas em um momento, mas que outro se comporta de forma diferente.

Um exemplo ocorrido na aula atual: a Mônica coloca width: 100% nas imagens, o que visualmente deixa uma do lado da outra no layout. Porém, esse atributo width: 100% não faria com que as imagens ocupassem 100% da largura do elemento pai? No caso, eles não teriam que ocupar esse espaço da div ao invés de ficar um ao lado do outro?

Se eu tirar 5 das 6 imagens, a única imagem continua sem ocupar o resto da div. Porque isso ocorre?

.swiper-slide img {
    width: 100%;
}

<div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="assets/ApacheKafka.svg" alt="Livro sobre apache kafka e spring boot da alura books"> Slide 1</div>
                <div class="swiper-slide"><img src="assets/Acessibilidade.svg" alt="Livro sobre acessibilidade da alura books"> Slide 2</div>
                <div class="swiper-slide"><img src="assets/Gestão2.svg" alt="Livro sobre gestão da alura books"> Slide 3</div>
                <div class="swiper-slide"><img src="assets/MEAN.svg" alt="Livro sobre mean da alura books"> Slide 3</div>
                <div class="swiper-slide"><img src="assets/Javascript.svg" alt="Livro sobre javascript da alura books"> Slide 3</div>
                <div class="swiper-slide"><img src="assets/Nodejs.svg" alt="Livro sobre node js da alura books"> Slide 3</div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        
            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>