Inappropriate chat UI

Ionic Framework ionic-v3
1

In my chat page message bubbles are appearing in an inappropriate way. How can I fix it.

.innermsg {
        display: block;
        padding: 5px 10px;
        margin: 5px;
        font-weight: 500;
        font-size: 16px;
        border-radius: 15px;
        margin-bottom: 5px;
    }

    .innermsg.left {
        float: left;
        background-color: #F1F0F0;
        color: black;
    }

    .innermsg.right {
        float: right;
        //margin-right: 10%;
        background-color: #0084FF;
        color: white;
    }

<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg left" text-left *ngIf="userId != msg.id">
      {{ msg.reply }}
    </div>
    <div class="innermsg right" text-right *ngIf="userId == msg.id">
        {{ msg.reply }}
    </div>
  </ion-list>

msg%20bub

2

Try adding clear: both to .innermsg ?