Bootstrip Grid: столбцы одинаковой высоты

Question

Привет всем. У меня есть сетка bootstrap со строкой, содержащей два столбца. 4 * 8. Когда я пытаюсь добавить карусель bootstrap в правый столбец, высота изображения не совпадает с другим столбцом. Когда я удаляю карусель bootstrap, высота строки совпадает только с тегом img. Это потому, что у карусели bootstrap по умолчанию есть несколько отступов ??

<div id="leadership-row" class="row">
        <div id="leadership-container" class="col-lg-4 col-sm-12 col-12">
            <div id="leadership-modal"></div>
            <img src="..." class="img-fluid w-100" alt="Bio Picture">
        </div>
        <div id="announcements" class="col-lg-8 col-sm-12 col-12">
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100 img-fluid" src="..." alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100 img-fluid" src="..." alt="Second slide">
                    </div>
                </div>
            </div>
     </div>
 </div>

Вот CSS, который я использую.

#leadership-container {
margin:0;
padding:0em;
padding-right: 0.5em;
height:100%; 
width:100%; 
vertical-align:top;
background-repeat:no-repeat;
background-size:contain;
background-position:60% 0;
position:relative;

}

#leadership-row{
    display:flex;
    margin-top:1em;
    height:100%;  
    grid-auto-rows: 1fr; 
}

Я бы хотел, чтобы строка и столбцы имели одинаковую высоту. С левой стороны у меня есть окно, которое показывает изображение профилировщика, а справа - вращающийся баннер. Я разработал изображения, чтобы иметь одинаковую высоту в Photoshop, но при использовании карусели высота баннера меньше. Может ли это быть связано с соотношением сторон?