Bonjour,

Je m'exerce au codage en réalisant un site totalement fictif.

Je souhaite  adapter le design d'un site à la taille d'un écran mobile en utilisant les media queries.

Problème : le titre "wild circus" n'est pas aligné avec le logo et le menu

Voici le code html du header :

<header>
            <div id="titre_principal">
                <div id="logo"><img src="images/logob.png" alt="Logo" /></div>
                <div id="titre"><h1>Wild Circus</h1></div>
                <div id="menu">
                    <nav>
                        <ul>
                               <li><a href="#ancre1">Performances</a></li>
                            <li><a href="#ancre2">About Us</a></li>
                            <li><a href="#ancre3">Prices</a></li>
                            <li><a href="#ancre4">Contact</a></li>
                        </ul>       
                    </nav>
                </div>
           
            </div>

           
        </header>

Style CSS en mode affichage desktop :

#titre_principal
    {
    display: flex;
    align-items:baseline;
    paddin: 15px;
    }


    #titre
    {
    margin: 15px;
    }


    /*  2.2 -  N A V I G A T I O N   */


    nav ul
    {
    list-style-type: none;
    display: flex;
    color: #6091cd;
    }


    nav li
    {
    font-family: 'oswald', Arial, serif;
    font-size: 1em;
    margin-right: 20px;
    color: #6091cd;
    }


    nav a
    {
    font-size: 1.3em;
    color: #6091cd;
    padding-bottom: 3px;
    text-decoration: none;
    }


    nav a:hover
    {
    border-bottom: 3px solid #e9ba38;
    }

Style CSS du media querie

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }


    nav
    {
        width: auto;
        text-align: left;

    }


    nav ul
    {
        flex-direction: column;

    }

    nav li
    {
        padding-left: 20px;

    }


   nav a
    {
        font-size: 1.1em;
    }
   
    nav a:hover
    {
        border-bottom: 0;
        color: #e9ba38;
    }

   

   #titre_principal

    {
    align-items: flex-start;
    }

}

Merci de votre aide