Why my buttons are overlapping my input fiels?

Question

I am following a tutorial to make a quiz in js. I am not very good especially with css. Can someone help me to figure it out why at question 3 my answers(from 1-5) are behind the buttons? I want the button to always be under the answers

This is how it should look like:

enter image description here

And this is how it looks:

enter image description here

(function () {

  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const submitButton = document.getElementById("submit");

  const myQuestions = [
    {
      question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
      factor: 2,
    },
    {
      question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
      factor:2,
    },
    {
      question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la      
                ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
                produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
                alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
                mazare, fasole, linte, naut, varza, brocoli, conopida`,
      factor:2,
    },
    {
      question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
      factor:2,
    },
    {
      question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
      factor:2,
    },
    {
      question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
      factor:2,
    },
    {
      question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
      factor:2,
    },
    {
      question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
      factor:1,
    },
    {
      question: `Mananc zilnic dulciuri procesate, prajituri, crème`,
      factor:2,
    },
    {
      question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
      factor:2,
    },
    {
      question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
      factor:1,
    },
    {
      question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
      factor:2,
    },
    {
      question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
      factor:2,
    },
    {
      question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
      factor:1,
    },
    {
      question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
      factor:1,
    },
    {
      question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
      factor:1,
    },
    {
      question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
      factor:1,
    },
    {
      question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
      factor:1,
    },
    {
      question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
      factor:1,
    },
    {
      question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
      factor:2,
    },
    {
      question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
      factor:2,
    },
    {
      question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
      factor:2,
    },
    {
      question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
      factor:1,
    },
    {
      question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
      factor:2,
    },
    {
      question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
      factor:1,
    },
  ];

  const answersToQuiz = 
  [
    
      "Niciodata",
      "Rar",
      "Ocazional",
      "Frecvent",
      "Intodeauna"

  ]

  function buildQuiz() {
    // variable to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // variable to store the list of possible answers
      const answers = [];
      // and for each available answer...
      for (const number in answersToQuiz) {
        
        // ...add an HTML radio button
        answers.push(
          `<label>
              <input type="radio" name="question${questionNumber}" value="${number}">
              ${parseInt(number) + 1} :
              ${answersToQuiz[number]}
            </label>`
        );
      }

      // add this question and its answers to the output
      output.push(
        `<div class="slide">
          <div class="question">${parseInt(questionNumber) + 1}. ${currentQuestion.question} </div>
          <div class="answers"> ${answers.join("")} </div>
        </div>`
      );
    });

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join("");
  }

  function showResults() {

    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll('.answers');

    // keep track of user's answers
    let currentScore = 0;

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {

      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;
      
      if(userAnswer === undefined)
      {
        alert("Va rugam sa raspundeti la toate intrebarile");
      }
      currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
    });

    //display a slider
    // show number of correct answers out of total
    resultsContainer.innerHTML = `Curent score ${currentScore}`;
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove('active-slide');
    slides[n].classList.add('active-slide');
    currentSlide = n;
    if(currentSlide === 0){
      previousButton.style.display = 'none';
    }
    else{
      previousButton.style.display = 'inline-block';
    }
    if(currentSlide === slides.length-1){
      nextButton.style.display = 'none';
      submitButton.style.display = 'inline-block';
    }
    else{
      nextButton.style.display = 'inline-block';
      submitButton.style.display = 'none';
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }
  
  function showPreviousSlide() {
    showSlide(currentSlide - 1);
  }

  // display quiz right away
  buildQuiz();

  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  showSlide(0);
  // on submit, show results
  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);

body{
	font-size: 20px;
	font-family: 'Work Sans', sans-serif;
	color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}
h1{
  font-weight: 300;
  margin: 0px;
  padding: 10px;
  font-size: 20px;
  background-color: #444;
  color: #fff;
}
.question{
  font-size: 30px;
  margin-bottom: 10px;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
}
.answers label{
  display: block;
  margin-bottom: 10px;
}
button{
  font-family: 'Work Sans', sans-serif;
	font-size: 22px;
	background-color: #279;
	color: #fff;
	border: 0px;
	border-radius: 3px;
	padding: 20px;
	cursor: pointer;
  margin-bottom: 20px;
  margin-top: 20px;
  z-index: 3;
  position: relative;
}
button:hover{
  background-color: #38a;
}



.slide{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.active-slide{
  opacity: 1;
  z-index: 2;
}
.quiz-container{
  position: relative;
  height: 200px;
  margin-top: 40px;
}

<!DOCTYPE html>
<html>
<head>
</head>  
<body>
    <div class="quiz-container">
        <div id="quiz"></div>
      </div>
      <button id="previous">Intrebarea precedenta</button>
      <button id="next">Urmatoare intrebare</button>
      <button id="submit">Afla rezultatul</button>
      <div id="results"></div>
    <script src="QuizLogic.js"></script>
    <link  rel="stylesheet" href="QuizTransition.css">
</body>

</html>

Answer 1

You have a strict height of your main div 200px. You can do 1) Increase height depend on your content 2) Put your buttons in div after your main div

Main problem is that you don`t have a content grid. So you have to create it before put something into page