I am struggling to center the image along with the text in my code. I attempted to use a container, but it did not have the desired effect.
Below is the image:
https://i.sstatic.net/fnaj4.png
<section id="features">
<!-- <div class="container-fluid"> -->
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature1.png" alt="feature1">
<h3 class="features-title">Food Listing.</h3>
<p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature2.png" alt="feature2">
<h3 class="features-title">Matchmaking</h3>
<p class="features-prgrph">Find people in your area looking for food.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature3.png" alt="feature3">
<h3 class="features-title">Request System.</h3>
<p class="features-prgrph">Request food from other users with a few taps.</p>
</div>
</div>
<!-- </div> -->
</section>