左边距和100%宽度推式浮动文本移动到浏览器边缘之外

<div class="footer">
  <div class="text">
  This text float to right
  </div>
</div>

.footer {
  position: fixed;
  top: 0;
  left:0;
  background-color: pink;
  width: 100%;
  margin-left: 50px;
}
.text {
  float: right;
}

以下是jsfiddle示例: https://jsfiddle.net/mddc/68tgqxpa/4/

问题是一些“This text float to right”被推到了浏览器边缘之外。如何使用CSS将全文显示到浏览器边缘?

无法删除左边距。