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
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>
In your html you have missed out a line opening the new div: (line 121)
<div class="form-group">