Positionner plusieurs items flex enfants d'un même container parent

Bonjour à tous et à toutes.

Je solilicite votre aide car je ne trouve pas de solution à un cas de figure en utilisants les flexbox. Je parviens au résultat souhaité en combinant les propriétés flexbox avec des propriétes de positions mais j'aimerai savoir s'il est possible d'obtenir cela rien qu'avec les flexbox car, paradoxalement, je trouve cela plus facile à utiliser :D. Je cherche à pouvoir positionner différents items enfants d'un même container parent, à différents endroits du container parent.

J'ai un header avec une image de fond qui correspond à mon container parent. J'ai un titre h1 à l'intérieur et un menu nav avec une liste de 4 liens qui correspondent aux enfants.

Mon but est de pouvoir positionner mon menu nav en haut de mon header de manière centrée. Et de positionner mon titre h1 au milieu de mon header de manière centrée également. Ma logique était d'appliquer un display: flex; , un justify-content: center ; un align-items: center; à mon header parent. Et d'appliquer ensuite à mon menu nav, un align-self: flex-start; J'esperais de la sorte que mon menu nav garderait sa position centrale tout en se positionnant en haut de mon header. Mais malheuresement un décallage se crée et le menu bien que positionné en haut n'est pas correctement centré, comme espéré.

Il y a donc des décallage indésirable dont je ne parviens pas à saisir la cause. J'obtiens le résultat désiré en utilisatiant des propriétés positions supplémentaires mais j'aimerai savoir s'il est possible de faire cela rien qu'avec les flexbox. Je suis encore tout nouveau en code html/css et flexbox donc, j'aimerai savoir si quelque chose fausse ma logique. Merci à ceux qui auront le courage de lire ce pavé et pourront m'aider :) .

Ce que je fais

Html :

    <header class="banner">
        <h1>
            mon titre de site web
        </h1>
        <nav>
            <ul>
                <li>
                    <a href="home.html">home</a>
                </li>
                <li>
                    <a href="home.html">home</a>
                </li>
                <li>
                    <a href="home.html">home</a>
                </li>
                <li>
                    <a href="home.html">home</a>
                </li>
            </ul>
        </nav>
    </header>

</body>```
--------------------------------------------------------------------------------------------------------------
Css :
body {
    margin: 0px;
    padding: 0px;
}

header {
    background-image: url(../basil_chara\ deisgn_2.png);
    background-size: cover;
    height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

nav {
    align-self: flex-start;
}

a {
    text-decoration: none;
    color: white;
    margin: 1rem;
    text-transform: uppercase;
}

li {
    list-style-type: none;
}

h1 {
    color: white;
}

ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Entourez votre code pour bien le mettre en forme

### Ce que je veux

A l'aide des flexbox (si cela est possible), Je veux à la fois centré mes items enfants : mon titre h1 et mon menu nav respectivement au milieu et en haut de mon header container parent de ces derniers.

### Ce que j'obtiens

Lorsque je met en commentaire mon titre h1 et j''effectue un align-self à mon item nav enfant, le centrage est correct mais lorsque les deux items enfants sont affichés après l'application de cette propriété mon titre h1 et mon menu sont positionné aux endroits voulu mais plus de façon centré avec les flexbox. les deux items n'étant pas alignés verticalement l'un par dessus l'autre au centre.