Does HTML button flexbox not place into a row?

Hello all, I am stuck right now making a quiz for my high school final and for some reason, the buttons flexbox refuses to place the buttons in a row across the screen. They are stuck in a column and I would also like the text to be right under the images. If someone can help me that would be great.

Here is what the webpage currently looks like

I tried to look for solutions elsewhere and relearned how to use flexbox, but nothing is working for this. Here is the code.

HTML:

<div class="TotalQuestions">
  <div class="question1">
    <div class="answer-choice">
        <button id="q1a1"><img class="button_images"src="lukeCombs.jpeg">  </button>
          
        <p>Luke Combs</p>
    </div>

   <div class="answer-choice">
        <button id="q1a2"><img class="button_images"src="TaylorSwift.webp">  </button>
          
        <p>Taylor Swift</p>
    </div>

    <div class="answer-choice">
        <button id="q1a3"><img class="button_images"src="Jcole.jpeg"></button>
        <p>J. Cole</p>
    </div>

    <div class="answer-choice">
        <button id="q1a4"><img   class="button_images"src="Franksinatra.jpg">  </button>
           
        <p>Frank Sinatra</p>
    </div>
  </div>
</div>

Here is the CSS:

.TotalQuestions{
  font-weight: bold;
  padding-bottom:100px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 100px;
  text-align: center;
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: baseline;
  flex-wrap:wrap;
}
.TotalQuestions>*{
  min-width:200px; 
}
.button_images{
  width: 100%;
  height:auto;
}

button{
  width:10%;
  border: none;
  background: none;
}
button:hover{
  padding:none;
  cursor:pointer;
  opacity: 0.8;
  transition: 0.3s;
}

Once again, any help is greatly appreciated.