我有一個小的網頁，我希望它有反應。

首先，我想知道為什么紅色水平線沒有居中，然后當我調整屏幕大小時，上面的立方體沒有調整大小。 我懷疑立方體不允許上面的大小調整，但我不明白為什么。

我試圖在CSS文件中做一些改變，我希望所有的元素都相應地調整大小。

* {
  margin: 0;
  padding: 0;
  --back: rgb(22, 22, 22);
}

html {
  height: 100%;
}

body {
  background-color: var(--back);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--clair);
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.contain {
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  height: 98%;
  width: 50%;
  background-color: var(--back-2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.cube {
  width: calc(60%);
  padding-top: calc(60%);
  background-color: rgb(174, 174, 174);
  flex-shrink: 1;
  flex-grow: 0;
}

.pboard {
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.row {
  width: 120px;
  height: 100%;
  border: 2px solid white;
  border-top: none;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  flex-direction: column;
  padding: 10px 0 5px 0;
  flex-shrink: 0;
  flex-grow: 0;
}

#row1-2,
#row2-2,
#row3-2 {
  justify-content: flex-start;
}

.row2,
.row3 {
  border-left: none;
}

#game-container {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#rows-sep-line {
  height: 3px;
  width: 67%;
  background-color: rgb(240, 122, 122);
  margin-top: 10px;
  margin-bottom: 10px;
}

<div id="game-container">
  <div id="pboard1" class="pboard">
    <div id="row1-1" class="row row1">
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>
    <div id="row2-1" class="row row2"></div>
    <div id="row3-1" class="row row3"></div>
  </div>
  <div id="rows-sep-line"></div>
  <div id="pboard2" class="pboard">
    <div id="row1-2" class="row row1">
      <!-- <div class="cube"></div>
                <div class="cube"></div>
                <div class="cube"></div>
                <div class="cube"></div> -->
    </div>
    <div id="row2-2" class="row row2"></div>
    <div id="row3-2" class="row row3"></div>
  </div>
</div>