1

Olá, eu estou com problemas que minhas row está saindo da area padrão e criando um tamanho para fora. Aqui esta a imagem

E meu HTML está assim:

section class="quemsomos">
    <div class="row">
        <div class="col-md-4">
            <div class="square1"></div>
            <div class="square2"></div>
        </div>

        <div class="col-md-8">
             <div class="col-md-12">
                <h4 class="t-quemsomos"><span class="q">Q</span>UEM SOMOS</h4>
             </div>
             <div class="col-md-6">
                <p class="p-quemsomos text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic aspernatur eius enim, officia illo nemo doloremque, accusamus, harum minima labore odit necessitatibus blanditiis. Hic, nihil. Temporibus dicta tempore molestiae voluptatem.</p>
             </div>
             <div class="col-md-6">
                 <a href="#" class="btn btn-primary btn-about">SAIBA MAIS</a>
             </div>
        </div>
    </div>
</section>
1
  • Cara se vc conseguiu com a ajuda de alguma resposta considere marca-la como aceita, assim ela não fica pendente se resposta aceita mesmo já tendo sido resolvida
    – hugocsl
    29/06/2019 às 9:51

1 Resposta 1

0

O que está acontecendo é que você está fazendo a implementação da GRID do bootstrap incorretamente, por isto está sendo criado o scroll no eixo x. O sistema de GRID do Bootstrap usa uma série de contêineres, linhas e colunas para layout e alinhamento do conteúdo.

Resumo de como funciona a GRID do bootstrap:

  • O .container fornece um meio de centralizar e horizontalmente preencher o conteúdo do seu site. Use .container para uma largura de pixel responsiva ou .container-fluid para todos os tamanhos de dispositivo e porta de visualização.
  • A .row(linhas) são invólucros para .col(colunas). Cada .col tem um padding horizontal (chamada de medianiz) para controlar o espaço entre elas. Isso é então neutralizado na .row com margens negativas. Dessa forma, todo o conteúdo das .col são alinhados visualmente no lado esquerdo.
  • Em um layout de grade, o conteúdo deve ser colocado dentro de .col e somente .col podem ser filhos imediatos de .row.

Figura Ilustrativa

inserir a descrição da imagem aqui

Logo sabendo-se disto, em seu código falta adicionar o .container ou .container-fluid, e corrigir diversas .col, onde você inseriu uma dentro da outra, então para corrigir isto faça o seguinte:

<section class="quemsomos">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="square1"></div>
                    <div class="square2"></div>
                </div>
                <div class="col-md-8">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h4 class="t-quemsomos"><span class="q">Q</span>UEM SOMOS</h4>
                            </div>
                            <div class="col-md-6">
                                <p class="p-quemsomos text-justify">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic
                                    aspernatur eius enim, officia illo nemo doloremque, accusamus, harum minima labore odit
                                    necessitatibus blanditiis. Hic, nihil. Temporibus dicta tempore molestiae voluptatem.
                                </p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn btn-primary btn-about">SAIBA MAIS</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Nota

Sugiro que leia mais sobre a GRID do boostrap para entender melhor, pois seu código está estruturado errado e como você não informou com detalhes o que está tentando fazer, não posso te ajudar com isto.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .