Elément centré barre de nav

Bonsoir ,

Tout d'abord, merci de prendre le temps de lire ces quelques lignes...
Je suis actuellement en train de réaliser mon site avec mes maigres bases de HTML et CSS (j'ai téléchargé une base simple sur HTML5 UP), et je suis face à un problème que je désespère de résoudre depuis plusieurs semaines.
Si vous arrivez à m'aider, alors vous m'enlèverez une belle épine du pied car je deviens folle avec ce truc

Voici mon souci ! J'ai une barre de navigation comme dans l'image ci jointe...



J'aimerais que les mots "Club Chamane" se placent bien au milieu de ma barre de navigation, comme le logo et le menu, mais impossible, quoi que je fasse il reste collé sur le bas de la barre.

Voici mon code :

 <div id="bandeaunav">
        <div id="home">
            <a href="#"><img src="images/logo.png" alt=""></a><span>Club Chamane</span>
        </div>
         <div class="navbar">                                                   
                    <ul id="menu">      
                        <li><a href="elements.html">le service</a></li>
                        <li><a href="#">le club</a></li>
                        <li><a href="">le blog</a></li>
                        <li><a href="">à propos</a></li>
                        <li><a href="">contact</a></li>
                        <li class="marge"></li>
                    </ul>
        </div>
    </div>

Et en CSS :

#home {
    display: inline-block;
    position: absolute;
    line-height: 3em;
    text-align: left !important;
    
}

#home a img {
    height: 3em;
    padding-left: 1.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

#home a {    
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;    
}


#home span { 
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;    
}


.navbar {    
    text-align: right;         
}

ul#menu {
    width: 100%;
    text-align: right;  
}

.navbar ul li {
    display: inline-block;
    line-height: 3em;
    text-align: right;
    color:black;
}

Mes bases de codage sont assez rouillées je ne serais pas surprise d'avoir fait des erreurs impardonnables *pastaper*

Merci énormément pour votre aide !

Bonne soirée à tous.
Modifié par Dakota (30 Dec 2020 - 18:12)

J'utiliserais les balises <nav> et <a>

Je vous prie de m'excuser de répondre si tardivement !
Je vous remercie énormément pour votre aide, je vais tenter de mettre ça en place et je reviens vers vous pour vous tenir au courant
Je ne connais pas du tout display : flex, du moins j'en ai vaguement entendu parler mais je ne l'ai jamais utilisé !

EDIT : ça fonctionne TT__TT c'était si simple ! MERCI
Modifié par Dakota (21 Jan 2021 - 11:58)