Перекрывающиеся столбцы сетки Bootstrap в Angular

Question

<div class="container container-fluid">
     <div class="row">
         <div class="col-lg-6">
             <app-profile [conId]="conId"></app-profile>
         </div>
         <div class="col-lg-6">
             <app-sales [conId]="conId"></app-sales>
         </div>
     </div>
</div>

Понятия не имею, почему это происходит.

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

Я приложил изображение того, что происходит, и выделил, где оно перекрывается.

Редактировать:

Кажется, выглядит хорошо, если я уберу теги компонентов и добавлю немного фонацвет.Так что это может на самом деле иметь отношение к самим компонентам?

<div class="row">
    <div style="background-color: red; height: 20px;" class="col-lg-6">    
    </div>
    <div style="background-color: yellow; height: 20px;" class="col-lg-6">
    </div>
</div>

Столбцы