How can I make a DIV inside a DIV use 90% of the width?

Question

I have tried this:

<div style="padding: 1rem 0;background-color:red">
   <div style="width: 90%;margin: 0 auto 0 auto; background-color:red">
   xxx
   </div>
</div>

But the inner DIV only occupies enough space for the xxx. How can I make that inner DIV have 90% of the width of the outer?

Answer 1

It is working fine you can't see that because both have red background color i changed it to green see this http://jsfiddle.net/vm3b350r/.

<div style="padding: 1rem 0;background-color:red">
  <div style="width: 90%;margin: 0 auto 0 auto; background-color:green">
    xxx
  </div>
</div>