html img имеет дополнительное место в поле содержимого

Question

вы можете посмотреть мою проблему здесь

Я использовал bootstrap, и когда я помещаю изображения, он автоматически освобождает дополнительное место в поле содержимого, как изображение, которое я загрузил. Никакие свойства у меня не работают.

Это происходит, только когда max-width составляет 992px

 <section class="page-section mb-0" id="about">
  <div class="container">
    <!-- About Section Heading-->
    <h2 class="page-section-heading text-center">
      About
    </h2>
    <!-- Divider-->
    <div class="divider-custom divider-light">
      <div class="divider-custom-line"></div>
    </div>
    <!-- About Section Content-->
    <div class="row">
      <div class="col-lg-4 ml-auto">
        <img class="demo" src="assets/img/demo.jpg" alt="image" />
      </div>
      <div class="col-lg-4 mr-auto">
        <p class="lead">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.
        </p>
      </div>
    </div>
  </div>
</section>

Answer 1

Используйте проверочный код в браузере и задайте родительскому тегу вашего img полную ширину. В вашем коде много div, вы должны указать размер не только для своего img, но и для других тегов, стоящих за ним.

Answer 2

Не могу предложить правильный ответ без приведенного примера кода, но похоже, что это может решить проблему:

img {
    width: 100%;
    height: auto;
}