Why Won't The Float Right Class Move My Icon to Far Right Of Border Box

I have a border box which I am trying to a icon to the far right of the border box using bootstrap 4.3 class float-right but the icon does not move and I can't understand why. I have a child component in which the scss is associated with. I have tried a combination of things but it still does not work. Can someone explain to me what the issue is. Code snippet includes.

Cartitem.html

<div class="container-md" style="height:50%; width:150px;">
  <img class="img-fluid" [src]="cartItem.imageUrl" alt="Cart Item">     
    <div class="text-nowrap" style="font-size:13px; width: 400px">{{cartItem.productName}} 
</div>
 
<div style="font-size:13px"><strong>{{ (cartItem.price) | currency}}</strong></div>
 <div class="float-right" style=" clear:both">
  <span ><i class="fa-solid fa-trash-can" style="color:#D30169;cursor: pointer; 
  "> 
</i></span>
</div>
 
</div>

cart.html

<div class="container" style="margin-bottom:20px">
<h1 style="text-align: center">Shopping Cart</h1>
<div class="cart-borderBox">
<div class="inside-bB">

div  *ngFor="let item of cartItems; let i = index">
    <app-cart-item [cartItem]="item"></app-cart-item>
</div>

</div>
</div>
</div>

scss

.cart-borderBox{
  box-sizing: border-box;
  margin: 0 auto;
  /*height: auto;*/
  width: 70%;
 
}

.inside-bB{
  border: 3px solid $primary-color;
  padding: 50px;
  margin:0 auto;
  border-radius: 8px;
}