为什么align / justify-self不适用于某些网格元素？

Question

我正在尝试使用CSS网格创建网站布局，并且使用align / justify-self可以按预期操作大多数内容，但是没有两个或三个区域，但我不知道为什么。它们是“导航”和“副标题”。

我不知道如何用更少的代码来发布它，而仍然让它演示可能导致冲突或其他原因使其无法正常工作的其他代码区域。出于某种原因，我必须先在此处发布更多信息，然后才可以发布此问题，因此我将写垃圾，直到可以发布为止。

.gridcontainer {
  display: grid;
  grid-gap: 5px 0px;
  grid-template-rows: 75px 75px 230px 750px 75px;
  grid-template-columns: 230px 570px;
  grid-template-areas: "banner subhead" "nav nav" "pic about" "left right" "footer footer";
  width: 80%;
  margin: 0px auto;
  overflow: hidden;
}

.banner {
  grid-area: banner;
  justify-self: start;
  align-self: center;
  height: 100%;
  width: 100%;
}

.subhead {
  grid-area: subhead;
  align-self: center;
  justify-self: start;
  font-size: 15px;
}

.nav {
  grid-area: nav;
  align-self: center;
  background-color: #5c5858;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

a {
  color: white;
  padding: 0px 30px;
}

.pic {
  grid-area: pic;
  background-color: #e4d1d1;
}

<div class="gridcontainer">
  <div class="banner">
    <h1>Your Logo</h1>
  </div>
  <div class="subhead">
    I can't get this to align.
  </div>
  <div class="pic">
    Image of plane
  </div>
  <div class="nav">
    I can't get this to align.
  </div>
  <div class="about">
    <h1>About</h1>
  </div>
</div>