Bonjour, et bonne année,

Dans mon header, je souhaite qu'à l'affichage sur un petit écran <700px :

- que mon petit menu soit positionné à gauche

- que mon logo soit centré

J'ai essayé plusieurs possibilités mais rien ne bouge.

Pourriez-vous m'aider svp ?

import styles from '../styles/Header.module.css';
import Logo from './Logo';
import Barrenav from '../components/Barrenav';


function Header() {
    return (
        <div id="header">
            <main className={styles.header__main}>
                <div className={styles.header__barreNav__grandEcran}>
                    <Barrenav />
                </div>
                <div
                    className={styles.header__logo__petitEcran}>
                    <Logo />
                </div>
                <h1 className={styles.header__title}>
                    FlashMultitâche
                </h1>
                <div className={styles.header__slogan}>
                    Ensemble, connectons votre projet.
                </div>

            </main>
        </div >
    );
}

export default Header;

/* Responsive : petits écrans */
@media (max-width: 700px) {

    .header__title,
    .header__slogan {
        display: none;
    }

    .header__main {
        justify-content: flex-start;
    }

    .header__logo__petitEcran {
        justify-content: center;
    }

}

@media (min-width: 701px) {

    .header__barreNav__grandEcran {
        display: none;
    }


}

.header__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    margin-bottom: 20px;
    background-color: rgb(230, 254, 254);

}


.header__title {
    line-height: 1.15;
    font-size: 4rem;
    color: #0070f3;


}



.header__slogan {
    color: rgb(79, 161, 233)
}

<div id="header">
    <nav class="header__barreNav__petitEcran">
        <!-- Contenu du menu -->
    </nav>
    <div class="header__logo__petitEcran">
        <!-- Contenu du logo -->
    </div>
</div>

@media (max-width: 700px) {
    .header__barreNav__petitEcran {
        display: flex;
        justify-content: flex-start; /* Aligne le menu à gauche */
        width: 50%; /* Ajustez la largeur selon vos besoins */
    }

    .header__logo__petitEcran {
        display: flex;
        justify-content: center; /* Centre le logo */
        width: 50%; /* Ajustez la largeur selon vos besoins */
    }

    #header {
        display: flex;
        flex-direction: row; /* Aligne le menu et le logo horizontalement */
        align-items: center;
        justify-content: space-between;
    }
}