Why does my inline-block element indent the top for no reason?

Question

Screenshot of the problemI've tried so many things i feel so lost. I simply want the image, div of buttons and final button to be inline side by side but the div #answers keeps indenting by like an inch at the top for no reason.

This is the html:

<div id="question-section" class="div-box">
                <!-- question heading populated by javascript function using object-->
                <h1 id="questions"></h1>
                <img id="image" src="" alt="Pictures of the ten anime characters in the quiz">
                <!-- four options populated by javascript function using object-->
                <div id="answers">                
                    <button class="btn"></button>
                    <button class="btn"></button>
                    <button class="btn"></button>
                    <button class="btn"></button>
                </div>
                <button id="next-question">></button>
            </div>

This is the css:

#answers {
    display: inline-block;
    width: 25rem;
}

#answers > button {
    margin: 1rem 2rem;
    width: 20rem;

}

#next-question {
    display: inline-block;
    float: right;
    width: 3rem; 
    margin: 1.5rem;
    font-size: 4rem;
    border-radius: 0.5rem;
    color: white;
    background-color: var(--purple);
    height: 17rem;
}

Tried different display or float for #answers. Float right fixes the issue but interferes with the standalone button placement.