Center Images in Reduced Sized Carousel

[Verecipillis]

Hi Everyone,

I looked eveywhere for a soution, but maybe I am not understanding the CSS syntax as I am pretty new at coding; but I am having trouble centering images in a carousel when it is reduced in resposive width. How could I do this? I am pretty sure I need to modify or add a class but unsure at this point.

My code is visible below, but can be viewed live at (link removed by moderator). Example of uncentered image below:

All help is appicated!

HTML

<aside>
	<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color:rgba(255,255,255,0.75)">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
	<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active"> <img class="mx-auto d-block" src="images/stock_assets/AdobeStock_261250340_Sustainablity.jpeg" alt="First slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>First slide Heading</h5>
          <p>First slide Caption</p>
        </div>
      </div>
      <div class="carousel-item"> <img class="mx-auto d-block" src="images/stock_assets/AdobeStock_183600437_Shared.jpeg" alt="Second slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>Second slide Heading</h5>
          <p>Second slide Caption</p>
        </div>
      </div>
      <div class="carousel-item"> <img class="mx-auto d-block" src="images/stock_assets/AdobeStock_447959775_Co-Op.jpeg" alt="Third slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>Third slide Heading</h5>
          <p>Third slide Caption</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
	</aside>

CSS

aside {
    float: left;
    width: 47%;
    margin-left: 2%;
    margin-right: 1%;
    padding-top: 1.5%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin-top: 20px;
    padding-bottom: 1.5%;
    margin-bottom: 20px;
}

[osgood_]

Add the 'img-fluid' class to the other classes you have set on the img.

That should make the image responsive which will maintain its aspect ratio when the browser viewport is widened and narrowed.

[Verecipillis]

I appreciate the help on this, thank you for the input.

[Nancy OShea · Accepted solution]

Bootstrap 4 uses Flexbox for alignment, not floats. And Carousels are block level (full width) elements. 

Your're complicating matters by putting your Carousel inside a floated container. 

It would be best to use 2 columns aligned with Flexbox and get rid of the floats.

<div class="container">

<div class="row">

<div class="col-lg-6">

Column 1

</div>

<div class="col-lg-6">

Column 2

</div>

</div>

</div>

[Verecipillis]

Thank you so much for the help! I appreciate being pointed in the right direction on this.