Angular * ngFor li - как установить ширину элемента из двух элементов?

Question

У меня есть * ngFor, который заполняет мою страницу с элементами.в ngFor у меня есть баннеры, которые я хочу показать.но ширина баннеров отличается от других элементов.

, поэтому баннер кликабелен только в пределах ширины оригинальной ширины li.половина баннера только отображается, но я не могу щелкнуть по нему.

Я думаю, что проблема в том, что высота других элементов становится больше, если показывается баннер.

Размеры оригинала li составляют 200X250 пикселей, а когда отображается баннер, размеры li изменяются на 200X400.(высота баннера добавляется к высоте других элементов)

синий = баннер

красный = кликабельный

зеленый = не кликабельный

<ul class="row">
  <li 
    *ngFor="let fav of favoriteLessons2;  let i = index" 
    class="col-12 col-sm-6 col-md-4 col-xl-4">
    <div class="item pointer">
      <jt-lesson-item 
        [lesson]="fav" 
        [userLessonId]="fav.id" 
        [lessonType]="true">
      </jt-lesson-item>
      <p-progressBar 
        class="customProgress" 
        [value]="func(favoriteLessons[i]) | number:'1.0-0'">
      </p-progressBar>
    </div>
    <div 
      class="banner pointer" 
      *ngIf="i > 0 && i%counter==0">
      <jt-ngui-in-view 
        [once]="true" 
        (inView)="updateBannerWatched(bannersArray[bannerIndex(i)])">
        <ng-template>
          <img 
            (click)="updateBannerClicked(bannersArray[bannerIndex(i)])" 
            [src]="bannersArray[bannerIndex(i)].imageUrl" 
            (click)="bennerPressed(bannersArray[bannerIndex(i)].id)">
        </ng-template>
      </jt-ngui-in-view>
    </div>
  </li>
</ul>

как я могу решить эту проблему?спасибо!

Отредактировано: css код:

ul{
    text-align: center; 
    direction: rtl;
    height:100%;
    padding-top: 40px;
    padding-right: 90px;
}

li{
    width:100%;
    max-width: 200px;
    list-style: none;
    direction: rtl;
    text-align: right;
    // display: inline-block;
    margin:10px;
    padding:10px;
    &.banner {
        width:100%;
        display: block;
        padding: 10px;
        margin-top:10px;
    }
}
img{
    display: block;
    margin: 10px;
    padding-top: 23px;
}



.item{
    background-color: #FFF;
    border-radius: 4px;
    width:200px;
&:hover{
    background: rgba(23, 23, 23, 0.8);
    border-radius: 4px;
    bottom: -4px;
    color: #000;
    left: -4px;
    right: -4px;
    top: -4px;
    display: block;
    opacity: 20;
    z-index: 1;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    padding:1px;
    border-radius: 4px;
    background-color: rgb(243, 243, 243);

}

}