Container not expanding for questionnaire

April 14, 2023

I’m sorry I just started learning about HTML and I was confused why this happened. I don’t know which line to copy here so I’m sorry I just dump the file here.

So I have 20 question with 4 or 5 radio option, the first 11 question is inside the container, but the rest of the question is outside the container.

https://github.com/PoDH9029/Quesionaire

enter image description here

I tried look at changing the Height, but it cause the overflowed ‘radio’ to stack on top of the container.

.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
  padding: 1.8rem 1rem;
}

@media (min-width:576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width:800px) {
  .container {
    max-width: 900px;
  }
}

<div class="container">
  <form action="" id="survey-form">
    <div class="form-group">
      <p id="quest">1. Apakah fleksibilitas jadwal kerja sangat penting untuk WFH?</p>
      <label><input type="radio" name="faktor1" value="1">Agak Penting</label>
      <label><input type="radio" name="faktor1" value="2">Cukup Penting</label>
      <label><input type="radio" name="faktor1" value="3">Penting</label>
      <label><input type="radio" name="faktor1" value="4">Sangat Penting</label>
      <!--There is total 20 question with 4 or 5 radio option, and the container work for the first 11 question, but the rest of the question is outside the container -->
    </div>
</div>
</form>