html - CSS order of applying bug -

html:

<div id="outer">    <div id="inner"></div>    <div id="..."></div> </div> 

css:

#outer div {    margin: 0 auto; }  #inner {    margin-top: 10px; } 

my problem inner div style. seems margin: 0 auto more important margin-top. same when put #outer div {...} below #inner {...}

i know how fix without using important. idea?

this not bug. #outer div more specific selector #inner. can think of css specificity points based system. in case each of 2 rules gets 10 points referencing id. first rule (which includes div element) gets 1 point. makes #outer div have 11 points , #inner left 10. means #outer div rule applied element.

#outer #inner {    margin-top: 10px; } 

the above rule have 20 points , applied element.