Bootstrap ползунок, отображающий изображения справа

Question

Я пытаюсь создать ползунки 2-этажного плана, которые устанавливаются внутри содержимого с вкладками, чтобы пользователь мог щелкнуть между квартирами с 1 спальней и 2 квартирами.

Я правильно установил ползунки на вкладках, однако, когда я помещаю изображения в них, они отображаются справа, я не вижу никаких margin или padding, поэтому я не уверен, почему это так происходит?

Я попытался добавить класс img-fluid, который я нашел в другом посте, но это ничего не дало.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<section id="floorplans">
  <div class="container">
    <div class="row">
      <div class="col-8">
        <h1>Floor Plans</h1>
        <p>Select your unit types<br> and browse our floorplans.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <div aria-orientation="vertical" class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
          <a aria-controls="v-pills-home" aria-selected="true" class="nav-link active" data-toggle="pill" href="#v-pills-home" id="v-pills-home-tab" role="tab">1 bedroom</a> <a aria-controls="v-pills-profile" aria-selected="false" class="nav-link" data-toggle="pill"
            href="#v-pills-profile" id="v-pills-profile-tab" role="tab">2 bedrooms</a>
        </div>
      </div>
      <div class="offset-1 col-8">
        <div class="tab-content" id="v-pills-tabContent">
          <div aria-labelledby="v-pills-home-tab" class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
            <div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
              <div class="carousel-inner">
                <div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
                <div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
                <div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
              </div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next"
                data-slide="next" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
            </div>
          </div>
          <div aria-labelledby="v-pills-profile-tab" class="tab-pane fade" id="v-pills-profile" role="tabpanel">
            <div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
              <div class="carousel-inner">
                <div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
                <div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
                <div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="http://lorempixel.com/400/200/"></div>
              </div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next"
                data-slide="next" href="#carouselExampleControls" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
            </div><a class="lnk-dwnl" href="">Download Floorplans (8)</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Floor Plans -->

Answer 1

Я понял, что у меня есть конфликтующие классы с другим ползунком,

для размещения, планы этажей правильно я добавил

.carousel-inner {

    background-color: #dadada;

}

.carousel-item img {

    max-width: 500px;
    margin: 0 auto;
    padding: 50px 0;
}