besoin d'aide sur un TP

Bonjour,
J'ai essayé de refaire seule le TP resto sur CSS. Je n'ai pas fait la partie mobile mais seulement la partie ordinateur. J'ai l'impression d'avoir ecrit le même code que dans le tuto mais je n'obtiens pas le même résultat. Pour la top barre impossible de faire fonctionner le space-between. Mes éléments du menu restent collés. et pour la baseline je devrais avoir les éléments les uns sous les autres grâce au display block mais quand je regarde dans la console display:block est barré au niveau de la feuille de style user-agent. Je pense que ça veut dire qu"il ne veut pas me le prendre en compte mais je ne trouve pas pourquoi.

Je vous laisse mon code pour la top barre et également celui de la baseline
Merci pour votre aide :-)

.topbar {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  max-width: 1110px;
  margin: 0 auto;

  .baseline {
  display: block;
  padding: 125px 0 230px;
}

Ce que je veux

Top barre :
Je dois avoir le nom du resto à gauche et le menu "About Menu Recipes Contact Reservation" plus sur la gauche, mais avec pas mal d'espace entre chaque item du menu.
dans mon code html ils sont écrtis comme ça
<header class="header">
<div class="topbar">
<div class="logo">
<a href="/index.html">The Fiasco</a>
</div>
<nav class="menu">
<a href="/about.html" class="menu-item">About Fiaco's</a>
<a href="/menu.html" class="menu-item">Menu</a>
<a href="/recipes.html"class="menu-item">Recipes</a>
<a href="/contact.html"class="menu-item">Contact</a>
<a href="/reservation.html" class="menu-item menu-button">Make reservation</a>
</nav>
</div>
<div class="baseline">
<span class="baseline-welcome">Welcome</span>
<strong class="baseline-name">The Fiasco</strong>
<span class="baseline-slogan">Spécialités méditéranéennes</span>
</div>
</header>

Baseline :
Welcome, The Fiasco et Spécialtiés culinaires devraient être écrits l"un en dessous des autres.
Dans mon code html ils sont ecrits comme ca :
<div class="baseline">
<span class="baseline-welcome">Welcome</span>
<strong class="baseline-name">The Fiasco</strong>
<span class="baseline-slogan">Spécialités méditéranéennes</span>
</div>

Ce que j'obtiens

Top barre :
Le nom du resto est à la bonne place mais les éléments du menu sont collés les uns aux autres, justifiés à gauche.

Baseline:
Les 3 textes sont sur la même ligne