Centerize things

Question

Why doesn't this center the words? I added both justify-content and align-items.

.box {
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 100px;
}

#item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: black;
  background-color: #FFF8DC;
}

<div class='box'>
  <div id='item'>
    <h4>why doesn't this work</h4>
  </div>
</div>