Center Images in Reduced Sized Carousel

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;
}