Why elements move to the left once a draggable element’s been dropped into a valid target?

I’ve written an “if statement” in “drop()” so that when the condition is met the user can drop the draggable element into a valid droppable element. The issue I’m running into is that once it’s done all the elements are moved to the left. What I’d like is for the droppable elements to stay in place. But I haven’t the foggiest how to go about it. Help please.

const questionQuiz = document.querySelector(".question");
const answerchoices = document.querySelector(".answerchoices");
const allChoices = Array.from(document.querySelector(".answerchoices").children)
const choiceA = document.querySelector(".choiceA");
const choiceB = document.querySelector(".choiceB");
const choiceC = document.querySelector(".choiceC");
const start = document.querySelector(".start");
const quizSection = document.querySelector(".quizSection");
const choices = document.querySelectorAll(".choice");


let activeQuestion = 0;
let dragged;




let questions = [

  {
    question: "How many Grand Slam men's singles titles has he won?",
    choiceA: 10,
    choiceB: 15,
    choiceC: 20,
    questionImg: "url(images/federer.jpeg)",
    correctAnswer: 20,
  },

  {
    question: "How many Formula One World Championship has he won?",
    choiceA: 5,
    choiceB: 7,
    choiceC: 10,
    questionImg: "url(images/hamilton.jpeg)",
    correctAnswer: 7,
  },

  {
    question: "How many NBA title has Lebron won?",
    choiceA: 6,
    choiceB: 3,
    choiceC: 4,
    questionImg: "url(images/LeBron.png)",
    correctAnswer: 4,
  },

  {
    question: "How many Ballon D'or has the Argentinina won?",
    choiceA: 5,
    choiceB: 6,
    choiceC: 7,
    questionImg: "url(images/LeBron.png)",
    correctAnswer: 7,
  },

]
//
function renderQuestion() {
  let q = questions[activeQuestion]
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
  questionQuiz.innerHTML = q.question;
  // document.body.style.backgroundImage = q.questionImg
}

renderQuestion()

questionQuiz.addEventListener("drag", function(e) {

})

questionQuiz.addEventListener("dragstart", function(e) {
  console.log("start");
  dragged = e.target;
  console.log(dragged.innerHTML)
});

questionQuiz.addEventListener("dragend", function() {
  console.log('end')
});

allChoices.forEach((choice) => {
  choice.addEventListener("dragover", dragOver)
});

allChoices.forEach(choice => {
  choice.addEventListener("dragenter", dragEnter)
});

allChoices.forEach(choice => {
  choice.addEventListener("dragleave", dragLeave)
});

allChoices.forEach(choice => {
  choice.addEventListener("drop", drop)
})


function dragOver(e) {
  e.preventDefault()
  console.log("dragover")
}

function dragEnter(e) {
  e.preventDefault();
  console.log("dragenter");
}

function dragLeave() {
  console.log("dragleave")
}

function drop(e) {
  e.preventDefault()
  if(parseInt(e.target.innerHTML) !== questions[activeQuestion].correctAnswer) return;
  e.target.appendChild(dragged)
}

body {
  background-repeat: no-repeat;: 
}


.quizSection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.question,
.answerchoices > *{
  height: 100px;
  width: 100px;
  border: 1px black solid;
}

.answerchoices > *{
  margin-bottom: 15px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>Drag And Drop</title>
  </head>
  <body>

    <div class="quizSection">
      <div class="question" draggable="true"></div>
      <div class=answerchoices>
        <div class="choiceA">choiceA</div>
        <div class="choiceB">choiceB</div>
        <div class="choiceC">choiceC</div>
      </div>

      <div class="start">Start quizz</div>
    </div>


    <script src="index.js" type="text/javascript"></script>

  </body>
</html>