为何Div元素无故下移？课表布局CSS问题排查

我在复刻学校课表时遇到一个问题——Div元素出现无故下移，找不到原因。看起来和文本或空间不足无关，因为已经设置了inline-flow。我试过设置vertical-align: top;但没用，猜测可能和padding或margin有关，但不确定具体原因。

CSS代码 #

:root {
  --background-color: #242424;
  --card-color: #666665;
}

body {
  font-family: "Radio Canada Big", sans-serif;
  background-color: var(--background-color);
}

#card {
  background-color: var(--card-color);
  width: 80%;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  box-shadow: 10px 10px 12px 7px rgba(0, 0, 0, 0.2);
}
#card * {
  color: white;
}

#table {
  height: 88%;
  display: flex;
  align-items: flex-start;
  justify-content: left;
  grid-column-gap: 50px;
  flex-flow: row;
}

.divOfWeek {
  height: 100%;
  display: inline-flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: column;
  margin-left: 5%;
}

#mainHeading {
  text-align: center;
  padding-top: 10px;
}

#headingDiv {
  height: 12%;
  justify-content: center;
}

.subject {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  background-color: var(--background-color);
  text-align: center;
}

.articleTable {
  background-color: aqua;
  display: inline-flex;
  flex-flow: row;
  justify-content: space-between;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  vertical-align: top;
}

.subInformation {
  font-size: 10px;
}

.subName {
  margin-bottom: 1px;
}

#hiddenSubject {
  visibility: hidden;
}

HTML代码 #

<body>
    <div id="card">
      <div id="headingDiv">
        <h1 id="mainHeading">Rozvrh 1.A</h1>
      </div>
      <section id="table">
        <div class="divOfWeek">
          <h2 class="dOfWeek">PO</h2>
          <h2 class="dOfWeek">ÚT</h2>
          <h2 class="dOfWeek">ST</h2>
          <h2 class="dOfWeek">ČT</h2>
          <h2 class="dOfWeek">PÁ</h2>
        </div>
        <article class="articleTable">
          <div class="subject">
            <p class="subName">Fy</p>
            <p class="subInformation"><em>MIJ - </em><strong>407</strong></p>
          </div>
          <div class="subject">
            <p class="subName">M</p>
            <p class="subInformation"><em>Re - </em><strong>404</strong></p>
          </div>
          <div class="subject">
            <p class="subName">Z</p>
            <p class="subInformation"><em>Re - </em><strong>204</strong></p>
          </div>
          <div class="subject">
            <p class="subName">Nj</p>
            <p class="subInformation"><em>MOJ - </em><strong>316</strong></p>
          </div>
          <div class="subject">
            <p class="subName">Aj</p>
            <p class="subInformation"><em>LL - </em><strong>308</strong></p>
          </div>
          <div class="subject">
            <p class="subName">ZSV</p>
            <p class="subInformation"><em>VkD - </em><strong>204</strong></p>
          </div>
          <div id="hiddenSubject"class="subject">
            <p class="subName"></p>
            <p class="subInformation"><em><em><strong></strong></p>
          </div>
          <div class="subject">
            <p>EV</p>
          </div>
          <div class="subject">
            <p>EV</p>
          </div>
        </article>
      </section>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Cactusss