Da sieht man dann sofort, wo es hakt: Du willst ja die Items 1 und 2 nebeneinander anordnen. Dafür brauchst Du, wenn Du es mit Flex erledigen willst, einen Container drum herum, also so:
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
<div class="flex-items">3</div>
Die Klasse "flex-items" für einen Flex-Container ist zwar nicht falsch, lädt aber zu Missverständnissen ein weil man meistens "flex-item" eben für ein Item verwendet. Daher war ich so frei, die Klassen anders zu definieren.
Mit diesem:
/* #welcome .flex-items{ */
#welcome .flex-container {
background-color: dimgray;
padding-top: 0.3vw;
width: 50vh;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
Alles anzeigen
und dem "flex-direction:row" darin warst Du schon auf dem richtigen Wege.
Natürlich kann man diese Anordnung auch mit Grid machen aber es nimmt sich nicht viel. Außerdem entfernt man sich mit jedem Spanning von der Semantik eines Grid.