Why is my being pushed up under my header when I add another element?

Question

I am having trouble trying to figure out what's going wrong.

Here I have only one div('question-container') with its children and it's positioned exactly how I want it.

Properly positioned Div:

When I try to add another div('question-container') below it pushes my first div up and behind the navbar. I want my div to start at the same position as the first image and then be able to scroll down to multiple more divs('question-container').

The first div is pushed up :

body {
  margin: 0;
  padding: 0;
}

#page-container {
  display: grid;
  height: 100vh;
  margin: 0;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas: "header header header header header header header header" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "sidebar flashcard flashcard flashcard flashcard flashcard flashcard flashcard" "footer footer footer footer footer footer footer footer";
}

#study-header {
  grid-area: header;
  background-color: aliceblue;
  margin-bottom: 10px;
}

#study-footer {
  grid-area: footer;
  background-color: blue;
}

#study-sidebar {
  grid-area: sidebar;
  background-color: red;
}

#flashcard-container {
  grid-area: flashcard;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}

.question-container {
  width: 80%;
  min-height: 65vh;
  background-color: black;
  margin-bottom: 70px;
  margin-top: 70px;
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-areas: "question buttons";
}

.question-area {
  grid-area: question;
  background-color: brown;
  margin: 20px;
}

.question-buttons {
  display: flex;
  flex-direction: column;
  grid-area: buttons;
  background-color: blueviolet;
  margin: 20px;
  justify-content: space-evenly;
  align-items: center;
}

.question-buttons>button {
  width: 90%;
  border: none;
  border-radius: 12px;
  background-color: pink;
}

@media only screen and (max-width: 768px) {
  #page-container {
    display: grid;
    height: 100vh;
    margin: 0;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 10% 5% 70% 5% 10%;
    grid-template-areas: "header header header" ". . ." "flashcard flashcard flashcard" ". . ." "footer footer footer";
  }
  .question-container {
    width: 80%;
    min-height: 65vh;
    background-color: black;
    margin-bottom: 70px;
    margin-top: 70px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    grid-template-areas: "question" "buttons";
  }
  .question-buttons>button {
    margin: 3px;
    width: 65%;
  }
}

<div id='page-container'>
  <header id='study-header'>content</header>

  <div id='study-sidebar'></div>

  <div id='flashcard-container'>

    <div class='question-container'>
      <div class='question-area'></div>
      <div class='question-buttons'>
        <button type='button'>button 1</button>
        <button type='button'>button 2</button>
        <button type='button'>button 3</button>
      </div>
    </div>

    <div class='question-container'>
      <div class='question-area'></div>
      <div class='question-buttons'>
        <button type='button'>button 1</button>
        <button type='button'>button 2</button>
        <button type='button'>button 3</button>
      </div>
    </div>

  </div>


  <footer id='study-footer'></footer>

</div>


<script src='./js/study.js'></script>