Porque não esta ficando alinhado?

Imagem da pagina, print


    <section>

        <h2 class="text-center">Conheça todas as nossas facilidades</h2>

        <div class="d-flex flex-column align-items-center gap-3">
            <div class="divs-facilidades">
                <div><i class="bi bi-x-diamond fs-1"></i></div>
                <div>PAGUE PELO PIX</div>
                <div class="texto-menor">Ganhe 5% OFF em
                    pagamentos via PIX</div>
            </div>

            <div class="divs-facilidades">
                <div><i class="bi bi-arrow-repeat fs-1"></i></div>
                <div>TROCA GRÁTIS</div>
                <div class="texto-menor">Fique livre para trocar em até 30 dias.</div>
            </div>

            <div class="divs-facilidades">
                <div><i class="bi bi-flower1 fs-1"></i></div>
                <div>SUSTENTABILIDADE</div>
                <div class="texto-menor">Moda responsável, que respeita o meio ambiente.</div>
            </div>
        </div>
        
    </section>

Oi, Willian, tudo bem?

O problema que você está enfrentando pode estar relacionado a classe divs-facilidades, que contém a propriedade widthpara definir uma largura padrão a todos os itens dessa seção. Há dois fatores que você precisa conferir para que essa funcionalidade seja aplicada.

O primeiro deles é garantir que o link do arquivo CSS que foi criado para escrever as classes personalizadas tenha sido feito. Isso pode ser feito por meio da tag <link> Da seguinte maneira:

<link rel="stylesheet" href="./estilos.css">

Lembre-se que no atributo hrefé necessário definir o caminho no qual o arquivo foi salvo. O trecho acima foi retirado do código da aula.

Além disso, você precisa que esse link seja feito dentro da tag <head> após os links que você utilizou para importar o Bootstrap.

Outro ponto a ser considerado é se você de fato adicionou a propriedade widthao arquivo CSS. A propriedade ficaria assim:

.divs-facilidades {
    width: 325px;
}

Também é importante verificar se o nome da classe no CSS é o mesmo nome definido no arquivo HTML.

Caso o problema persista, peço que compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva. Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Porque não esta ficando alinhado? "Onde diz: Sustentabilidade"

Mergulhe em programação