Более конкретное правило CSS не работает

В моем следующем коде я определил более конкретное правило для h1 как #inner h1 и менее конкретное правило, поскольку также определено #container h1. Но если #container h1 помещается после #inner h1, он вступает в силу, а #inner h1 игнорируется, хотя этого не должно быть, потому что он более конкретный.

Пожалуйста, помогите мне разобраться в проблеме.

CSS:

#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }

HTML:

<div id="container">
  <div id="inner">
    <h1>Hello World!</h1>   
  </div>
</div>