Почему в флексбоксе создано дополнительное пространство?

Question

Мне было просто интересно, почему в этом коде создано дополнительное пространство. Я не изменил flex-grow. Это код:

и моя таблица стилей:

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.picHome {
  background-image: url("");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 10%;
  background-color: rgba(1, 1, 1, 0.5);
}
button {
  text-decoration: none;
}
button:hover {

}

Спасибо! Пожалуйста, помогите с этим, я застрял на некоторое время и думаю, что это связано с помещением двух вещей в один div.