After using bootstrap, I noticed that images were creating extra space within the content-box. I tried various properties but none seemed to work for me.
This problem only occurs when the max-width is set at 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>