Пространство между кнопками с помощью flex

Question

Вот мой HTML

<div class="bets">
    <button class="name-price">
        <div class="real-madrid"><!---->Real Madrid<!----></div>
        <div class="price"><!---->1.23<!----></div>
    </button>

    <button class="name-price">
        <div class="barcelona"><!---->Barcelona<!----></div>
        <div class="price"><!---->2.05<!----></div>
    </button>
</div>

Вот SASS

.bets
    display: flex
    justify-content: space-between

Пробел между кнопками с использованием flex не работает должным образом. Что мне не хватает?

Изменение наценки на основе предложения в комментариях. Результат тот же:

Правила CSS применяются к элементам, когда я его проверяю: