0

Tengo una sección en en html y estoy utilizando un poco de bootstrap. Quiero mover un poco más a la izquierda una columna, pero no me deja alinear más hacia la izquierda.

Esta es la sección, la columna en particular es la que dice hexagons:

 <section class="s-services bgc" id="servicios">
      <div class="container--custom py-5">
           <div class="row justify-content-between align-items-center ">
                <div class="col hexagons">
                     <div class="swiper s-services__swiper mt-5">
                          <div class="swiper-wrapper"></div>
                          <div class="swiper__navigation swiper__prev s-services__prev"></div>
                          <div class="swiper__navigation swiper__next s-services__next"></div>
                     </div>

                     <ul class="s-services__cards px-0 hexagons">
                          <li class="s-services__row">
                               <ul class="s-services__cols">
                                    <li class="s-services__card">
                                         <div class="hexagon hexagon2">
                                              <div></div>
                                         </div>
                                    </li>
                               </ul>
                          </li>

                          <li class="s-services__row">
                               <ul class="s-services__cols">
                                    <li class="s-services__card">
                                         <div class="hexagon hexagon2">
                                              <div></div>
                                         </div>
                                    </li>

                                    <li class="s-services__card">
                                         <div class="hexagon hexagon2">
                                              <div></div>
                                         </div>
                                    </li>

                                    <span class="hexagon__txt">
                                         Apps Móviles
                                    </span>
                                    
                                    </div>
                                    </div>
                          </li>                               
                     </ul>
                     </li>
                </div>
                <div class="col">
                     <div>
                          <h2 class="mb-3 bg-service">Nuestros Servicios</h2>
                          <p class="mb-3 bg-service">
                               Desarrollamos y damos consultoría sobre distintas plataformas y programas en base a un análisis de última generación.
                          </p>
                          <a href="#" class="btn btn-conocenos">Conócenos</a>
                     </div>
                </div>
           </div>
      </div>
 </section>

Esta imagen muestra claramente como me gustaría que se viera:

introducir la descripción de la imagen aquí

He intentando disminuirle el padding a la primera columna pero no se mueve lo suficiente.

Cómo puedo hacer que se mueva la primera columna más a la izquierda así como esta en la imagen?

2
  • 1
    ¿Podrías mostrar qué tenés en tu CSS? Podés insertar un snippet (con el botón que indica <>) para crear un ejemplo mínimo verificable para este caso.
    – padaleiana
    Commented el 25 sept. 2021 a las 15:15
  • Que version de bootstrap estas usando?
    – Lilibeth
    Commented el 25 sept. 2021 a las 15:22

1 respuesta 1

0

En primera instancia, te sugiero revisar tu código html, ya que, como puedes ver, traté de identarlo y se puede evidenciar que tienes varias etiquetas mal cerradas y esto influye en el resultado.

Para el caso puntual que preguntas, puedes usar un margin-left negativo únicamente para los elementos que contengan la clase hexagons.

Te dejo un ejemplo sólo con texto para que puedas visualizar el resultado. Luego lo puedes adaptar a tu código.

Te sugiero usar margin ya que hace referencia al espacio exterior del elemento, en cambio padding hace referencia al espacio interior del elemento.

.hexagons{
  margin-left: -50px;
}
<div class="hexagons">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus justo in enim ultricies, vitae tincidunt neque dignissim. Etiam feugiat dapibus eros, vitae tempus arcu ullamcorper sit amet. Proin sagittis feugiat orci sit amet facilisis. Vestibulum quam magna, gravida pulvinar justo sit amet, vulputate finibus dolor. Cras vestibulum a metus condimentum tempus. Etiam enim neque, interdum a viverra eu, posuere id quam. Aliquam posuere luctus ultricies. Cras ipsum lectus, commodo eget rutrum gravida, pulvinar et justo.</p>

  <p>In aliquam mauris vel accumsan porta. Vestibulum facilisis ipsum sed commodo malesuada. Phasellus a libero mauris. Aliquam vel tellus placerat, lobortis dui sit amet, scelerisque est. Aliquam interdum neque sed euismod bibendum. Ut non est vitae nibh posuere cursus. Praesent sit amet nulla elit. Morbi tempus odio et massa sodales ornare. Cras id tempus arcu.</p>

  <p>Fusce pretium pretium arcu, sed dignissim massa pellentesque eu. Nulla vulputate ac felis viverra malesuada. Nam in venenatis ligula. Cras ornare convallis ante a tempus. Pellentesque posuere arcu magna. Sed suscipit ultrices fermentum. Donec tempor porta tortor. Ut placerat sodales ante, eget ultrices felis. Etiam tincidunt diam erat, eu mattis turpis semper ut. Quisque hendrerit tellus sed scelerisque tincidunt. Donec purus dui, luctus eu facilisis in, semper sed velit. Duis nec iaculis leo. Proin a egestas odio, in tempor augue.</p>
</div>

1
  • Muchas gracias DjCrazy logre realizarlo con el margin-left negativo Commented el 25 sept. 2021 a las 16:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.