Элементы в флекс-контейнере перекрываются

Question

Когда я пытаюсь использовать этот код, две точки перекрывают друг друга и текст.

Почему?Как я могу заставить их быть рядом?

.container {
  display: flex;
  flex-direction: row;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

<div class="container">
  <span class="dot" />
  <span class="dot" /> some text
</div>

Answer 1

Потому что вы не правильно закрыли пролеты

      .container {
        display: flex;
        flex-direction: row;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

    <div class="container">
      <span class="dot"></span>      
      <span class="dot"></span>     
      some text
    </div>