Удалить интервал между столбцом и содержимым

Question

Я пытаюсь выровнять изображение по левому краю родительского блока div.Однако, кажется, есть некоторая проблема с пробелами, которая мешает мне сделать это.

Использование float-left только позволяет мне зайти так:

Это аналогичная ситуация при попытке плавать вправо:

    <section id="products-section">
            <div class="container">
                <div class="row">
                    <div class ="col-lg-1"> </div>
                    <div class ="col-lg-10 border-break-full"> 
                        <div class="row">
                            <div class="col-lg-4 border-red">
                                <img class="img-responsive float-right border-red" src="img/test-product.JPG" alt="">
                            </div>
                            <div class="col-lg-8">
                            </div>
                        </div>
                    </div>
                    <div class ="col-lg-1"> </div>
                </div>
            </div>
    </section>

Есть идеи?

Answer 1

Используйте Flexbox:

   

<div class="col-lg-4 border-red d-flex justify-content-start"> <img class="img-responsive float-right border-red" src="img/test-product.JPG" alt=""> </div>
------------------------------------------------------------------------

Answer 2

Из документации Bootstrap :

Столбцы имеют горизонтальные отступы для создания желобов между отдельными столбцами, однако вы можете удалить поля из строк и отступы из столбцов с помощью .noжелоба на .row.

Попробуйте использовать .no-gutters класс, подобный этому:

<section id="products-section">
  <div class="container">
    <div class="row no-gutters">
      <div class="col-lg-1"></div>
      <div class="col-lg-10 border-break-full">
        <div class="row no-gutters">
          <div class="col-lg-4 border-red">
            <img
              class="img-responsive float-right border-red"
              src="img/test-product.JPG"
              alt=""
            />
          </div>
          <div class="col-lg-8"></div>
        </div>
      </div>
      <div class="col-lg-1"></div>
    </div>
  </div>
</section>

* edit