Bonjour les amis 

je suis entrain d'intégrer une maquette web j'ai un petit problème j'arrive pas a faire un menu responsive en html et css je voulais mettre le titre de la page a gauche et le menu à droite sur la même ligne et quand je serais sur les petites écrans je voulais que mon menu s'affiche aussi en mode horizontal voici mon code html 

<div class="head">
<h1>MEDIA-TECH</h1>
	

<nav>
		<ul>
			<li><a href="#">ACCUIEL</a></li>
			<li><a href="#">SERVICE</a></li>
			<li><a href="#">Histoire</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	
</nav>

	</div>
</header>

et voila mon code css  

@charset "utf-8";
/* CSS Document */

.head{
	
	display: flex;
}

nav ul {

    display: flex;
    list-style-type: none;
	padding-top: 33px;
	text-align: justify;
	color: black;
}

li {
	
	font-size: 20px;
	margin-left: 10px;
	text-align: end;

}

merci d'avance pour vos réponses