Bootstrap фон Карусели не равен

Question

У меня проблема с Bootstrap Карусель с двумя фонами.

#Carousel-purpose {
  background-color:#856c8b;
  text-align: center;
  color: #fff;
}

.carousel-inner {
  padding: 7% 15%;
}

<section id="Carousel-purpose">

  <div id="Carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#Carousel-purpose" data-slide-to="0" class="active"></li>
      <li data-target="#Carousel-purpose" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active"  data-interval="3000">
       <h3>Szyjemy maski dla najbardziej potrzebujących oraz domów opieki.</h3>
       <img src="images/hospital.png" width="100px" height="100px">
      </div>
      <div class="carousel-item"  data-interval="3000">
       <h3>Wypełnij ankietę, by pomóc nam dostarczyć maski dla potrzebujących!</h3>
       <button type="button" class="btn btn-outline-light btn-lg ">Light</button>
      </div>
     
    </div>
    <a class="carousel-control-prev" href="#Carousel-purpose" 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="#Carousel-purpose" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>

Почему они не равны? Я приложил изображение ниже для лучшего объяснения. Возможно, проблема в CSS, но, честно говоря, я не знаю, где кто-нибудь может помочь?

Answer 1

вместо использования,

<img src="images/hospital.png" width="100px" height="100px">

try,

<img src="images/hospital.png" style=" width:100px; height: 100px !important;">

используйте то же самое для второго фонового изображения.