row altına id eklemek | HTML, CSS, BOOTSTRAP

Merhaba hepinize iyi akşamlar dilerim temadaki bir row içerisine div ekleyip id verince grid değerleri bozuluyor yardımcı olabilirseniz sevinirim
Not: id değerine ait hiçbir css kodu eklenmemiştir

normalde aşağıdaki gibi görünmesi gerekiyor

ancak araya div eklediğim zaman alt alta geliyor bunu aynı şekilde yan yana kalmasını istiyorum

alttaki bozuk halidir

<div class="row">
   <div class="col-xl-4">
      <div class="card widget widget-list">
         <div class="card-header"></div>
         <div class="card-body"></div>
      </div>
   </div>
   <div id="deger">
      <div class="col-xl-4">
         <div class="card widget widget-list">
            <div class="card-header"></div>
            <div class="card-body"></div>
         </div>
      </div>
      <div class="col-xl-4">
         <div class="card widget widget-list">
            <div class="card-header"></div>
            <div class="card-body"></div>
         </div>
      </div>
   </div>
</div>

<divclass="col-xl-4"> burası colum alanı
<divid="deger">colum icindeki ıd de sorun vermez

float: left işinizi görür

<div id="deger" class="col-xl-4"> şeklinde kullanın, row altında col clası olmayan elementler 100% genişlikte olur, yada değer id witth verin

cevaplarınız için teşekkürler

size ayrıca teşekkür ederim problem çözüldü

.row
.col-xl-12
.div#id
.col-xl-12
.row
.col-xl-4
.col-xl-4
.col-xl-4


Yapınız bu şekilde olursa kayma yapmaz.