Inappropriate chat UI

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.reply }}
    <div class="innermsg right" text-right *ngIf="userId ==">
        {{ msg.reply }}


Try adding clear: both to .innermsg ?