左余白と、ブラウザのエッジ

Question

を越えて100％の幅のプッシュフロートテキスト移動、私は次のようなHTMLがあります。

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

と、次のCSSを：ここでは

.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/

「このテキストが右に浮いています」の一部がブラウザの端を超えてプッシュされるという問題があります。 CSSを使ってフルテキスト表示をブラウザの端に表示するにはどうすればよいですか？

左マージンは削除できません。

ありがとうございます！このようなfooterの

Answer 1

使用幅：

width: calc(100% - 50px); 

、そこにあなたが行きます！あなたのフィードバックを教えてください。ありがとう！

.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>

Answer 2

追加

.text { margin-right: 50px;}