Margin left and 100% width push float text move beyond the browser edge

Question

I have the following html:

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

and the following CSS:

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

Here is the jsfiddle example: https://jsfiddle.net/mddc/68tgqxpa/4/

The problem is that some of "This text float to right" is pushed beyond the browser edge. How can I use CSS to make the full text display to the browser edge?

The left-margin cannot be removed.

Answer 1

Use width of footer like this:

width: calc(100% - 50px);

and there you go! Let me know your feedback. Thanks!

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

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