テキストを正しくhtmlで整列するには

Question

テキストを最初の行のように右に揃えようとしていますが、2番目の行が画像の下に溢れています。行数に関係なく、テキストを適切に配置するにはどうすればよいですか？

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5">  
</span> 
<h5 id="H5_6">Payroll</h5> 
    <p id="P_7"> 
     What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv</p> 

チェックjsbinください

編集：私はSafariは（1）これを正しく表示しているが、Google Chromeは（2）ではないことがわかります。

Answer 1

私はA_3要素（ブートストラップ円）にあなたの助けを

おかげで多くのことを

margin: 0px 25px 80px; 

を追加することによって、それを修正！

Answer 2

http://jsbin.com/qigitoyeyo/1/edit?html,css,output

は、あなただけの "余白 - 右：115px;" を設定することができます<p>タグに記載されています。

このように、高さと幅を手動で設定する必要はありません。

Answer 3

box-sizing: border-box;を両方の要素から削除します。また、width: 457.5px;に#H5_6

を追加してください。

#A_3 { 
 
    float: right; 
 
    height: 65px; 
 
    text-align: center; 
 
    width: 65px; 
 
    background: rgb(153, 153, 153) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-radius: 50% 50% 50% 50%; 
 
    font: normal normal normal normal 35px/50px'Open Sans', arial, sans-serif; 
 
} 
 
/*#A_3*/ 
 

 
#H5_6 { 
 
    text-align: right; 
 
    width: 457.5px; 
 
} 
 
/*#H5_6*/ 
 

 
#P_7 { 
 
    color: rgb(95, 95, 95); 
 
    height: 56px; 
 
    text-align: right; 
 
    width: 457.5px; 
 
    font: normal normal 300 normal 16px/30.8px'Open Sans', arial, sans-serif; 
 
} 
 
/*#P_7*/

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5"></span> 
 
<h5 id="H5_6"> 
 
\t \t \t Payroll 
 
\t \t </h5> 
 
<p id="P_7"> 
 
    What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv 
 
</p>