Why does inner DIV spill out of outer DIV?

Because of the margin - the width is 100% PLUS the margin. To avoid that, write width: calc(100% - 10px); (= twice the margin.) Same for height.

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {

  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  background-color: orange;
}

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

The answers above assume that you do not want the margin. If you, in fact, want the margins, then you can add overflow: hidden; to the #outer.

The margin property moves the div by 5 pixels from both top and left direction, and since divs have overflow: show; as default (which means any content that goes outside the div will be shown) you can see the div going outside.

you can avoid that using overflow: hidden; to hide any content going outside the div, if that's what you want to do otherwise you need to set your inner div size in a way that doesn't go outside its container

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
  overflow: hidden;
}
#inner {

  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}