Css responsive mobile

En formation développeur web sur OpenClassrooms depuis le 30 mars dernier, je dois réaliser une page responsive dans le cadre du 2ème projet de ma formation. Seulement, cela fait maintenant 5 jours que je n'arrive pas à trouver la réponse par moi-même au sujet de la responsivité du Header et de la barre de recherche.

En effet, je dois obtenir un rendu comparable à l'image que j'ai joint au message.

Tout ce que j'ai fait jusqu'à présent ne m'a pas permis de l'obtenir.

Je vous serai reconnaissance de m'aider à débloquer cette situation.

Code html :

/--! Pour le Header --/
<header>
<div>
<img src='Images/logo/Reservia.svg' alt='logo_de_reservia' />
</div>
<nav>
<ul>
<li><a class='hebergement' href='#hebergement'>Hébergement</a></li>
<li><a class='activite' href='#activites'>Activités</a></li>
<li><a class='sinscrire' href='#inscrire'>S'inscrire</a></li>
</ul>
</nav>
</header>
/--! Ceci vient d'une autre section --/
<div id='recherche'>
<form id='recherche'>
<label for='recherche'><img class='imagefont' src='images/fromfrontawesome/mapm .arker.svg' alt='Map Marker' /></label>
<input type='search' name='recherche' id='recherche' placeholder='Marseille, Fr ance' autofocus />
<button>Rechercher</button>
</form>
</div>

Code css :

header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

nav a {
text-decoration: none;
margin-right: 15px;
justify-content: space-between;
color: black;
padding-top: 22px;
}

nav a:hover {
color: #DEEBFF;
border-top: 2px #0065FC solid;
}
#recherche form {
margin-bottom: 20px;
position: relative;
width: 300px;
display: flex;
align-items: center;
padding: 15px 15px 15px 0px;
}

#recherche label {
background: #F2F2F2;
padding: 10px 15px 10px 10px;
align-items: center;
border: 1px #F2F2F2 solid;
border-radius: 10px 0px 0px 10px;
}

#recherche input {
background: white;
padding: 12px 10px 11px 10px;
align-items: center;
border: 1px #F2F2F2 solid;
}

#recherche button {
background: #0065FC;
padding: 12px 10px 11px 10px;
align-items: center;
border: 1px #0065FC solid;
border-radius: 0px 10px 10px 0px;
color: #F2F2F2;
}

Merci à vous tous !