文本对齐不起作用（css）

我有以下html：

        <div class="chat-scroll height-full">
            <div class="width-full" style="text-align: left">
                <div class="bubble-left"></div>
            </div>
            <div class="width-full">
                <div class="bubble-right" style="text-align: right"></div>
            </div>
        </div>

这是CSS：

.height-full {
    height: 100%;
}

.width-full {
    width: 100%;
}


  .bubble {
    position: relative;
    max-width: 90%;
    min-height: 30px;
    padding: 5px;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2196F3', endColorstr='#3B4FCC');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
  }

  .bubble-left {
    @extend .bubble;
    left: 0;

  }

  .bubble-right {
    @extend .bubble;
    right: 0;
  }

问题如您在屏幕快照中所见：框未在左对齐1，在右对齐第二。

我做错什么了？