Comment centrer texte dans un parent div des enfants divs de différentes tailles (Flexbox)

Je crée un site avec Flexbox (dont je suis assez nouveau à l'aide). Je souhaite mettre le nom du site et le bouton déroulant du menu sur la même ligne. J'ai pu faire cela avec succès avec Flexbox, mais le titre n'est pas centré sur la page elle-même. Je suis conscient du fait que c'est parce que le bouton de menu a une croissance flexible de 1 tandis que le titre a une poussée flexible de 8. J'ai fait cela exprès pour espacer, mais le titre n'est pas centré sur la page entière.

J'ai essayé de quitter le titre div blanc et d'écrire un titre en dehors de la DIV, mais cela place le texte avant le conteneur parent. P>

.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order:1;
    /*Flex Parent Code*/
    display: flex;
    flex-direction: row;

}

/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    order: 1;
    flex-grow: 1;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order: 2;
    flex-grow: 8;
}