0

Como posso fazer para colocar a imagem encostado no canto direito? Vejam:

inserir a descrição da imagem aqui

O código:

HTML

<section class="apresentacao">
      <div class="container">
            <div class="row">
                        <div class="col-md-8 col-sm-9">
                        <h3>SEJA BEM-VINDO AO NOSSO SITE</h3>
              <span style="text-align: justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>POR QUE NOSSO SITE?</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>NOSSOS SERVIÇOS</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <br><br>
                <h4>CUSTOMIZAÇÃO</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    </span>
            </div>
                    <div class="col-md-4 col-sm-3" align="right">
                        <img src="img/intro-bg.png" class="img-responsive">
                    </div>
          </div>
       </div>
  </section>

CSS

.apresentacao {
  background-color: #E6E6FA;
  border-top: 3px solid #B0C4DE;
    padding: 50px 0;
    color: #000;
}
.apresentacao h3 {
        color: #000;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.apresentacao p {
    color: #000;
    font-size: 15px;
}
.apresentacao .btn-primary {
    border-color: #002e5b;
    margin-top: 50px;
    color: #000;
}

Quando tiro classe container, ele estoura o layout. Vejam abaixo:

inserir a descrição da imagem aqui

Gostaria que a imagem fosse para o lado direito da tela e o texto permanecesse onde está.

0

1 Resposta 1

0

Como vc está utilizando bootstrap é só trocar a classe container para container-fluid.

.apresentacao {
    background-color: #E6E6FA;
    border-top: 3px solid #B0C4DE;
    padding: 50px 0;
    color: #000;
}
.apresentacao h3 {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
.apresentacao p {
    color: #000;
    font-size: 15px;
}
.apresentacao .btn-primary {
    border-color: #002e5b;
    margin-top: 50px;
    color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="apresentacao">
      <div class="container-fluid">
            <div class="row">
                  <div class="col-md-8 col-sm-9">
                        <h3>SEJA BEM-VINDO AO NOSSO SITE</h3>
                        <span style="text-align:justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>POR QUE NOSSO SITE?</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>NOSSOS SERVIÇOS</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                              <br><br>
                              <h4>CUSTOMIZAÇÃO</h4>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                       </span>
                  </div>
                  <div class="col-md-4 col-sm-3" align="right">
                       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9lMIXR_TCUqcJTI_ap31AHy8ES-VTPXmy9czTHn7n2vrsgVdNYQ" class="img-responsive">
                  </div>
            </div>
       </div>
</section>

Você deve fazer log-in para responder a esta pergunta.