Flex zeigt alles untereinander statt nebenainander

[hegi108]

Hat jemand einen Vorschlag, warum die Felder nicht nebeneinander angezeigt werden?

CSS:

.flex-container {
  display: flex;
	flex-direction: row;	
  justify-content: space-between; /* gleichmässig verteilen */
}
      
.flex-item {
	height: 24px;
}

HTM:

       <div class="flex-container">  
        <div class="flex-item">   
          A&nbsp;
        </div>
        <div class="flex-item">   
          B&nbsp;
        </div>
        <div class="flex-item">   
          C&nbsp;
        </div>
        <div class="flex-item">   
          D&nbsp;
        </div>
       </div>

Hat jemand einen Tipp? Vielen Dank!

Warum wird das hier nicht so schön dargestellt wie ich es eingegeben habe?