Мобильное Меню Media Queries

пишу первый раз на форуме, очень нужна помощь. делаю мобильную версию сайта с помощью Media Queries и на данном этапе учебы обьязан делать исключительно с этим. как расставить меню как на фото? все испробовал...

<header>
    <div id="logo">
        <img src="images/logo/[email protected]" alt="Reservia">
    </div>
    <nav>
        <ul>
            <li><a href="#a1">Hébergement</a></li>
            <li><a href="#a2">Activités</a></li>
            <div class="span">
            <li><a href="#"><span>S'inscrire</span></a></li>
        </div>
        </ul>
    </nav>

</header>


@media screen and (max-width: 768px)

{

header
{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#logo
{

}

nav ul
{
    align-self: flex-start;
}

nav li
{
    padding-left: 4px;
}

nav a
{
    font-size: 1.1em;
}


nav a:hover
{
    color: #0065FC;
    text-decoration: underline 3px solid;
}

nav ul li
{
    justify-content: space-between;
    display: flex;
    align-items: center;

}

}