テキストをテキストと同じマージンに整列する

Question

テキスト（リスト）を右に揃え、その上のイメージも右に揃えますが、それらは固定され、左側から10％離れています画面の私はまた、両方の要素を修正したい。もし誰かがそれへのリンクを望むなら、私はcodepenを持っていますが、それはとてもシンプルで、私が望む効果はありません。私は基本的にこれを私の "ヘッダー"として使い、サイトの右側をその右側に置いています。例：

 ########    body-------> 
     #  # 
     #  #    body-------> 
     #  # 
     ########    body-------> 


          body-------> 


      Item 1    body-------> 
      Item 2 
    Item Number 3 
     Item #4    body-------> 

Answer 1

私はJSFiddleをご覧になれます。

HTML

<div id="header"> 
    <img src="http://placehold.it/100x100"> 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item Number 3</li> 
    <li>Item #4</li> 
    </ul> 
</div> 
<div id="body"> 
    BODY 
</div> 

CSS

#header, 
#body { 
    display: inline-block; 
} 

#header { 
    width: 40%; 
    float: left; 
    text-align: right; 
} 

#header img, 
#header ul { 
    padding-right: 10%; 
} 

ul { 
    list-style: none; 
} 

#body { 
    width: 60%; 
    float: right; 
} 

あなたのヘッダとボディの幅は、あなたが望む今まで何に変更することができます。他に何かしたいのなら教えてください。

適用するCSSに応じて、padding-right: 10%;をmargin-right: 10%に変更することもできます。