微调具有不同颜色的两个div的样式

Question

我想为 2 个嵌套的 div 设置背景，外层为红色背景，而内层为蓝色背景，但不起作用。如何使用背景颜色将这两个方块设置为两个级别？

#d1 {
    width: 200px;
    background-color: red;
}
#d2 {
    width: 150px;
    background-color: blue;
    border-radius: 10px;
}

<div id="d1"> 
  <div id="d2">
      <h1> text contents here...</h1>
  </div>
</div>