Почему эти две кнопки привязки не отображаются в одной строке? Это сработало для моих кнопок div. (HTML и CSS)

Question

У меня есть 3 деления, которые я нахожусь в одной строке с «display: flex», но я не могу понять, почему это не работает для моих 2 якорей. Я чувствую, что должно быть что-то довольно очевидное, что мне не хватает.

#controls {
    display: flex;
    justify-content: space-between;
}

#hud {
    display: flex;
    justify-content: space-evenly;
}

<div id="hud">
                <div id="hud-item">
                    <p class="hud-prefix">
                        Question
                    </p>
                    <h1 class="hud-main-text" id="questionCounter">
                        
                    </h1>
                </div>
                <div id="hud-item">
                    <p class="hud-prefix">
                        Accuracy
                    </p>
                    <h1 class="hud-main-text" id="accuracy">
                        0%
                    </h1>
                </div>
                <div id="hud-item">
                    <p class="hud-prefix">
                        Score
                    </p>
                    <h1 class="hud-main-text" id="score">
                        0
                    </h1>
                </div>
</div>
<a id="controls">
            <a id="quitgame" class="btn" href="/index.html" tabindex="5">← Quit Game</a>
            <a id="continue" class="btn" tabindex="6">Continue →</a>
</a>