Responsive/ Header

Hello,

The photo 2 is what I have to make and the first one is what I have.

My question, how to give max-height to my header… It dosent work for me…

Here is my code:

Thank you in advance. :slight_smile:

<!DOCTYPE html>
<html>	
	<head>
		<link rel="stylesheet" type="text/css" href="reservia.css">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.google.com/specimen/Raleway?sidebar.open=true&selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="file:///Users/loussinesaratelian/Dropbox/Mon%20Mac%20(MBP-de-Loussine)/Desktop/RESERVIA/fontawesome-free-5.15.1-web/css/all.css">
		<title>Réservia</title>
		<meta charset="utf-8">
	</head>
	<body class="body">
		<header>
			<p class="logo">
				<img src="Reservia.svg">
			</p>
			<nav class="menu">
				<a class="menu-hébergement" href="">Hébergements</a>
				<a class="menu-activités" href="">Activités</a>
				<a class="menu-inscription" href="">S'inscrire</a>
			</nav>
		</header>
		<main>
			<h1 class="big-title">Trouvez votre hébergement pour des vacances de rêve</h1>
			<p class="comp-text">En plein centre ville ou en pleine nature</p>
			<nav class="input-group">
				<span class="map-marker">
					<i class="fas fa-map-marker-alt"></i>
				</span> <!--span est un conteneur générique en ligne (inline)-->
				<input type="text" value="Marseille,France">
				<button>Rechercher</button>
			</nav>
			<form method="post" action="traitement.php" class="flex-group">
				<h1 class="filtres">Filtres</h1>
				<section class="group-filtres">
					<nav class="economique">
						<div class="money">
							<i class="fas fa-money-bill-wave"></i>
						</div>
						<button class="eco-button">Économique</button>
					</nav>
					<nav class="familial" >
						<div class="children">
							<i class="fas fa-child"></i>
						</div>
						<button class="fam-button">Familial</button>
					</nav>
					<nav class="romantique">
						<div class="heart">
							<i class="fas fa-heart"></i>
						</div>
						<button class="rom-button">Romantique</button>
					</nav>
					<nav class="animaux-autorises">
						<div class="dog">
							<i class="fas fa-dog"></i>
						</div>
						<button class="anim-button">Animaux autorisés</button>
					</nav>
				</section>
			</form>
			<div class="complementary-info">
				<i class="fas fa-info"></i>
				<p class="text-complementary-info">Plus de 500 logements sont disponibles dans cette ville</p>
			</div>
			<div class="first-2sectors"><!--Pour la mise en page de deux premier secteurs côte-->
				<section><!--Pour le premier secteur-->
					<h1 class="Title-Marseille">Hébergements à Marseille</h1>
					<div class="flex-articles1"><!--Pour le flexbox des articles de premier secteur -->
						<article class="section1-art-unit1">
							<img id="trying"class="photos-Marseille" src="marcus-loke-WQJvWU_HZFo-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge la Cannebière</h2>
								<p class="info-phrases">Nuit à partir de 25€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	fred-kleber-gTbaxaVLvsg-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel du port</h2>
								<p class="info-phrases">Nuit à partir de 52€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	reisetopia-B8WIgxA_PFU-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel Les mouettes</h2>
								<p class="info-phrases">Nuit à partir de 76€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="annie-spratt-Eg1qcIitAuA-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel de la mer</h2>
								<p class="info-phrases">Nuit à partir de 46€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray"class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge Le Panier</h2>
								<p class="info-phrases">Nuit à partir de 23€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel chez Amina</h2>
								<p class="info-phrases" >Nuit à partir de 96€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
					<nav class="plus-Marseille">Affichez plus</nav>
				</section>
				<section class="all-group-popular">
					<div class="popular-first-phrase">
						<h1>Les plus populaires</h1>
						<i class="fas fa-chart-line"></i>
					</div>
					<div class="all-articles2">
						<article class="article2-1">
							<img class="photos-popular" src="emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
							<div class="white-background2">
								<h2 class="max-width-popular"> Hôtel Le Solei du matin</h2>
								<p class="popular-P">Nuit à partir de 128€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="articles2">
							<img class="photos-popular" src="aw-creative-VGs8z60yT2c-unsplash.jpg">
							<div class="white-background2">
			    				<h2 class="max-width-popular"> Au coeur de l'eau Chabres d'hôtes </h2>
			    				<p class="popular-P">Nuit à partir de 71€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
			    			</div>
			   			</article>
			    		<article class="articles2">
			    			<img class="photos-popular" src="febrian-zakaria-sjvU0THccQA-unsplash.jpg">
			    			<div class="white-background2" >
			    				<h2 class="max-width-popular"> Hôtel Tout bleu et Blanc </h2>
			    				<p class="popular-P">Nuit à partir de 68€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
				</section>
			</div>
			<section class="sec3">
				<h1 id="h1-act-Marseille">Activités à Marseille</h1>
				<div class="All-articles3">
					<article>
						<img class="photos-act-Marseille" src="reno-laithienne-QUgJhdY5Fyk-unsplash.jpg">
						<div class="white-background3">
							<h2>Vieux Port</h2>
						</div>
					</article>
					<div class="column2-art3">
						<article>
							<img class="photos-act-Marseille" src="paul-hermann-QFTrLdQIRhI-unsplash copie.jpg">
							<div class="white-background3">
								<h2>Port de Pomègues</h2>
							</div>
						</article>
						<article class="marg-top3">
							<img class="photos-act-Marseille" src="kevin-hikari-rV_Qd1l-VXg-unsplash.jpg">
							<div class="white-background3">
								<h2>Iles du Frioul</h2>
							</div>
						</article>
					</div>
					<article>
						<img class="photos-act-Marseille" src="kilyan-sockalingum-NR8-cBCN3aI-unsplash copie.jpg">
						<div class="white-background3">
							<h2>Parc National des Calanques</h2>
						</div>
					</article>
					<div class="2column-art3">
						<article>
							<img class="photos-act-Marseille" src="florian-wehde-xW9e8gdotxI-unsplash.jpg">
							<div class="white-background3">
								<h2>Notre-Dame-de-la-Garde</h2>
							</div>
						</article>
						<article class="marg-top4">
							<img class="photos-act-Marseille" src="lena-paulin-wH2-EJoDcV0-unsplash.jpg">
							<div class="white-background3">
								<h2>Parc Longchamp</h2>
							</div>
						</article>
					</div>
				</div>
			</section>
		</main>
		<footer>
			<section class="sec-4">
				<div class="col1-sec4">
					<h1 class="f-size">A propos</h1>
					<nav class="cols">
						<a href="">Fonctionnement du site</a>
						<a class="marg-phrases" href="">Conditions générales de vente</a>
						<a class="marg-phrases" href="">Données et confidentialité</a>
					</nav>
				</div>
				<div class="col2-sec4">
					<h1 class="f-size">Nos hébergements</h1>
					<nav class="cols">
						<a href="">Charte qualité</a>
						<a class="marg-phrases" href="">Soumettre votre hôtel</a>
					</nav>
				</div>
				<div class="col3-sec4">
					<nav class="cols">
						<h1 class="f-size">Assistance</h1>
						<a href="">Centre d'aide</a>
						<a class="marg-phrases" href="">Nous contacter</a>
					</nav>
				</div>
			</section>
	    </footer>
	</body>
</html>
body{
	font-family:'Raleway', sans-serif;
	margin-top: 0px;
	box-sizing: border-box;
}
.menu{
	font-size: 15px;
	display: flex;
	box-sizing: border-box;
}

.menu-hébergement{
	display: flex;
	text-decoration: none;
	color: #0065FC;
	margin-right: 67px;
	align-items: center;
	border-top: 2px solid #0065FC;
	box-sizing:border-box;
	height:100% ; 
	padding-left: 16px;
 	padding-right: 16px;
}
.menu-activités{
	color: black;
	text-decoration: none;
	margin-right: 69px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.menu-inscription{
	color: #0065FC;	
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
header{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	max-width: 1400px;
	box-sizing: border-box;
	padding-left: 50px;
	margin: 0 auto;
}
h1{
	font-size: 22px;
	box-sizing: border-box;
}
.big-title{
	display: flex;
	padding-top: 3px;
}
.comp-text{
	display: flex;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.input-group{
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	margin-top: -2px;
}
.input-group span{
	display: flex;
	background-color: #F2F2F2;
	align-items: center;
	border-radius: 17px 0px 0px 17px;
	font-size: 18px;
	padding-right:	19px;
	padding-left: 19px;
	box-sizing: border-box;
}
.input-group input{ 
  	border: 1px solid #f2f2f2;
  	border-left: 0;
  	border-right: 0;
 	font-weight: bold;
  	font-size: 18px;
  	margin: 0px;
 	box-sizing: border-box;
 	padding-left: 15px;
}
.input-group input: focus{
 	outline: none;
 	box-sizing: border-box;
}
.input-group button{
	border: none;
	background-color: #0065FC;
	border-radius: 0px 17px 17px 0px;
	color: #fff;
	font-weight:bold;
	padding: 15px 17px 15px 17px;
	font-size:18px; 
	margin:	0px;
	box-sizing:	border-box;
}
.flex-group{
	display:	flex;
	justify-content:	flex-start;
	align-items:	baseline; 
	box-sizing: border-box;
}
.group-filtres{
    display: flex;
    margin-top: 28px;
    border: none;
    box-sizing:	border-box;
    flex-wrap: wrap;
}
.filtres{
	display: flex;
	font-size: 18px;
	font-weight: bold;
	box-sizing: border-box;
	margin-top: -2px;
}
.money{
	display: flex;
	margin-left: 33px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 17px 15px 17px 15px;
	font-size: 16px;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.eco-button{
	display: flex;
	padding: 13px 30px 13px 65px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 36px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.economique{
	display: flex;
	align-items: center;
	margin-right: 18px;
	box-sizing: border-box;
}
.children{
	display: flex;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 18px 15px 18px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	margin-left: 15px;
	box-sizing: border-box;
}
.fam-button{
	display: flex;
	padding: 13px 23px 13px 56px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 17px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.familial{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.heart{
	display: flex;
	margin-right: 7px;
	margin-left: 10px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 16px 15px 14px 15px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}	
.rom-button{
	display: flex;
	padding: 13px 18px 13px 59px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 11px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;	
}
.romantique{ 
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.dog{
	display: flex;
	margin-right: 20px;
	margin-left: 4px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 14px 15px 14px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.anim-button{
	display: flex;
	padding: 13px 20px 13px 60px;
	font-weight: bold;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 4px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.animaux-autorises{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.complementary-info{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	box-sizing: border-box;
	margin-top: 20px;
}
.fa-info{
	display: flex;
	color: #0065FC;
	border-radius: 50px 50px 50px 50px;
	padding: 5px 8px 4px 8px;
	background: transparent;
	border: 2px solid #F2F2F2;
	box-sizing: border-box;
	font-size: 12px;
}
.text-complementary-info{
	display: flex;
	margin-left: 10px;
	box-sizing: border-box;
}
main{
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 30px;
	max-width: 1400px;
	margin: 0 auto;	
}
.Title-Marseille{
	display:flex;
	background-color: #F2F2F2;
	max-width: 884px;
	margin-top: 24px;
	border-radius: 20px 20px 0px 0px;
	padding-top: 42px;
	padding-left: 38px;
}
.flex-articles1{
	display: flex;
	max-width: 874px;
	flex-wrap: wrap;
	background-color: #F2F2F2; 
	margin-top: -19px;
	padding-left:10px;
}
.section1-art-unit1{
	margin-top: 24px;
	margin-left: 32px;
}
.section1-art-unit2{
	margin-top: 30px;
	margin-left: 32px;
}
.photos-Marseille{
	border-radius: 15px 15px 0px 0px;
	border: 5px solid white;
}
.white-fond{
	background-color: white;
	margin-top: -24px;
	border-radius: 0px 0px 15px 15px;
	padding-left: 15px;
}
.info-phrases{
	font-size: 14px;
	margin-bottom: 5px;
	margin-top: -8px;
}
h2{
	display: flex;
	font-size: 16px;
	padding-top: 11px;
}
.fa-star{
	display: flex;
	font-size: 11.5px;
	color: #0065FC;
	margin-right: -4px;
	padding-bottom: 10px;
}
#gray{
	color: gray !important;
}
.plus-Marseille{
	display: flex;
	font-size: 17px;
	font-weight: bold;
	background-color: #F2F2F2;  
	max-width: 848px;
	padding-top: 41px;
	padding-left: 36px;
	padding-bottom:47px;
	border-radius: 0px 0px 20px 20px;
}
.first-2sectors{
	display: flex;
}
.all-group-popular{
	display: flex;
	flex-direction: column;
	margin-left: 40px;
}
.article{
	display: flex;
	flex-direction: row;
	max-width: 300px; 
}
.popular-first-phrase{
display: flex;
align-items: baseline;
justify-content: space-between;
background-color: #F2F2F2; 
max-width: 420px;
border-radius: 20px 20px 0px 0px;
padding-left: 38px;
padding-bottom: 8px;
margin-top: 24px;
padding-top: 23px;
}
.fa-chart-line{
	display: flex;
	font-size: 22px;
	padding-right: 40px;
}
.group-popular{
	display: flex;
	flex-direction: column;
}
.article2-1{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.articles2{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.all-articles2{
	background-color: #F2F2F2;
	max-width: 420px;
	padding-left: 36px;
	border-radius: 0px 0px 20px 20px;
	padding-right: 40px;
}
.photos-popular{
	border: 5px solid white;
	border-radius: 20px 0px 0px 20px;
}
.white-background2{
	display: flex;
	flex-direction: column; 
	align-items: stretch;
	background-color: white;
	border-radius: 0px 20px 20px 0px;
	padding-left: 17px;
	padding-right: 38px;
}
.max-width-popular{
	display: flex;
	max-width: 150px;
	align-content: stretch;
}
.popular-P{
	font-size: 14px;
}
#h1-act-Marseille{
	margin-top: 61px;
}
.photos-act-Marseille{
	border-radius: 15px 15px 0px 0px;
}
.white-background3{
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	max-width: 289px;
	padding-bottom:4px;
	padding-left: 19px;
	padding-top:10px;
	margin-top: -17PX;
}
.All-articles3{
	display: flex;
	max-width: 1342px;
	justify-content: space-between;
	margin-top: 24px;
}
.marg-top3{
	margin-top: 45px;
}
.marg-top4{
	margin-top: 41px;
}
a{
	text-decoration: none;
	color: black;
}
.sec-4{
	padding-top: 31px;
	display: flex;
	justify-content: space-between;
	max-width: 1021px;
}
p{
	font-size: 16px;
}
.f-size{
	font-size:18px;
}
.cols{
	display: flex;
	flex-direction: column;
	font-size: 16px;
	padding-bottom: 84px;
	padding-top: 5px;
}
.col2-sec4{
	margin-right: 57px;
}
.marg-phrases{
	margin-top: 13.5px;
}
article{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
footer{
	padding-left: 50px;
	padding-right: 50px;
	background-color: #F2F2F2; 
	max-width: 1400px;
	margin: 58px auto 0; 
	box-sizing: border-box;
}

@media only screen and (max-width: 600px){

	.menu-hébergement{
		border-top: hidden;
		border-bottom: 2px solid #0065FC;

	}
	.menu-activités{
		border-bottom: 2px solid #0065FC;
	}
	.menu-inscription{
		
	}
	.menu{
		max-width: 360px;
		margin-left: 100px;
	}
	.yes{
		
	}
	header{
		max-width: 360px;
		margin-left: 0px;
		padding-left: 30px;
	}
	main{
		max-width: 360px;
		margin-left: 0px;
	}
	footer{
		max-width: 360px;
		padding-left: 0px;
		margin-left: 0px;
	}
	.first-2sectors{
		flex-wrap: wrap;
	}
	.All-articles3{
		flex-wrap: wrap;
	}
	.sec-4{
		flex-direction: column;
	}
	.logo{

	}
	.sec-4{
		margin-left: 30px;
		max-height: 436px;
	}
	.col2-sec4{
		
	}
	.col3-sec4{
		margin-bottom: 30px;
		}
	.cols{
		padding-bottom: 30px;
	}
	body{
		margin-top: 
	}
}
![2|298x500](upload://kxyRS1tVmdkROmlG7OUC6PYOMoS.jpeg) ![1|636x500](upload://rQp9XC0xI2WzGYBKfCGc1O933R6.png) 

photo 1

photo 2

This would be a good use case for CSS grid. You can’t do this with flexbox, unless you do some tweaking with absolute positioning.

Your HTML would need to be structured like this:

<header>
    <nav class="menu">
        <p class="logo">
            <img src="Reservia.svg">
        </p>
        <a class="menu-hébergement" href="">Hébergements</a>
        <a class="menu-activités" href="">Activités</a>
        <a class="menu-inscription" href="">S'inscrire</a>
    </nav>
</header>

And in CSS, instead of setting the header to flex, the <nav> would be the grid container. This is your current layout:

header nav {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
}

If that looks weird, remove the big margins from your nav links.

To change the layout for small viewports, you’ll then need a media query to rearrange the grid-items.

@jsdisco Thank you.

I don’t want to change my original code, because it works very well.
my problem is with small viewports.
I tried to explain on the photo. Hope it’s clearer …

Thanks a lot

<!DOCTYPE html>
<html>	
	<head>
		<link rel="stylesheet" type="text/css" href="reservia.css">
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.google.com/specimen/Raleway?sidebar.open=true&selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="file:///Users/loussinesaratelian/Dropbox/Mon%20Mac%20(MBP-de-Loussine)/Desktop/RESERVIA/fontawesome-free-5.15.1-web/css/all.css">
		<title>Réservia</title>
		<meta charset="utf-8">
	</head>
	<body class="body">
		<header>
			<p class="logo">
				<img src="Reservia.svg">
			</p>
			<nav class="menu">
				<a class="menu-hébergement" href="">Hébergements</a>
				<a class="menu-activités" href="">Activités</a>
				<a class="menu-inscription" href="">S'inscrire</a>
			</nav>
		</header>
		<main>
			<h1 class="big-title">Trouvez votre hébergement pour des vacances de rêve</h1>
			<p class="comp-text">En plein centre ville ou en pleine nature</p>
			<nav class="input-group">
				<span class="map-marker">
					<i class="fas fa-map-marker-alt"></i>
				</span> <!--span est un conteneur générique en ligne (inline)-->
				<input type="text" value="Marseille,France">
				<button>Rechercher</button>
			</nav>
			<form method="post" action="traitement.php" class="flex-group">
				<h1 class="filtres">Filtres</h1>
				<section class="group-filtres">
					<nav class="economique">
						<div class="money">
							<i class="fas fa-money-bill-wave"></i>
						</div>
						<button class="eco-button">Économique</button>
					</nav>
					<nav class="familial" >
						<div class="children">
							<i class="fas fa-child"></i>
						</div>
						<button class="fam-button">Familial</button>
					</nav>
					<nav class="romantique">
						<div class="heart">
							<i class="fas fa-heart"></i>
						</div>
						<button class="rom-button">Romantique</button>
					</nav>
					<nav class="animaux-autorises">
						<div class="dog">
							<i class="fas fa-dog"></i>
						</div>
						<button class="anim-button">Animaux autorisés</button>
					</nav>
				</section>
			</form>
			<div class="complementary-info">
				<i class="fas fa-info"></i>
				<p class="text-complementary-info">Plus de 500 logements sont disponibles dans cette ville</p>
			</div>
			<div class="first-2sectors"><!--Pour la mise en page de deux premier secteurs côte-->
				<section><!--Pour le premier secteur-->
					<h1 class="Title-Marseille">Hébergements à Marseille</h1>
					<div class="flex-articles1"><!--Pour le flexbox des articles de premier secteur -->
						<article class="section1-art-unit1">
							<img id="trying"class="photos-Marseille" src="marcus-loke-WQJvWU_HZFo-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge la Cannebière</h2>
								<p class="info-phrases">Nuit à partir de 25€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	fred-kleber-gTbaxaVLvsg-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel du port</h2>
								<p class="info-phrases">Nuit à partir de 52€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit1">
							<img class="photos-Marseille" src="	reisetopia-B8WIgxA_PFU-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel Les mouettes</h2>
								<p class="info-phrases">Nuit à partir de 76€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="annie-spratt-Eg1qcIitAuA-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel de la mer</h2>
								<p class="info-phrases">Nuit à partir de 46€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray"class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>	
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
							<div class="white-fond">
								<h2>Auberge Le Panier</h2>
								<p class="info-phrases">Nuit à partir de 23€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="section1-art-unit2">
							<img class="photos-Marseille" src="febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
							<div class="white-fond">
								<h2>Hôtel chez Amina</h2>
								<p class="info-phrases" >Nuit à partir de 96€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
					<nav class="plus-Marseille">Affichez plus</nav>
				</section>
				<section class="all-group-popular">
					<div class="popular-first-phrase">
						<h1>Les plus populaires</h1>
						<i class="fas fa-chart-line"></i>
					</div>
					<div class="all-articles2">
						<article class="article2-1">
							<img class="photos-popular" src="emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
							<div class="white-background2">
								<h2 class="max-width-popular"> Hôtel Le Solei du matin</h2>
								<p class="popular-P">Nuit à partir de 128€</p>
								<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
								</div>
							</div>
						</article>
						<article class="articles2">
							<img class="photos-popular" src="aw-creative-VGs8z60yT2c-unsplash.jpg">
							<div class="white-background2">
			    				<h2 class="max-width-popular"> Au coeur de l'eau Chabres d'hôtes </h2>
			    				<p class="popular-P">Nuit à partir de 71€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
			    			</div>
			   			</article>
			    		<article class="articles2">
			    			<img class="photos-popular" src="febrian-zakaria-sjvU0THccQA-unsplash.jpg">
			    			<div class="white-background2" >
			    				<h2 class="max-width-popular"> Hôtel Tout bleu et Blanc </h2>
			    				<p class="popular-P">Nuit à partir de 68€</p>
			    				<div class="group-star">
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i class="fas fa-star"></i>
									<i id="gray" class="fas fa-star"></i>
								</div>
							</div>
						</article>
					</div>
				</section>
			</div>
			<section class="sec3">
				<h1 id="h1-act-Marseille">Activités à Marseille</h1>
				<div class="All-articles3">
					<article>
						<img class="photos-act-Marseille" src="reno-laithienne-QUgJhdY5Fyk-unsplash.jpg">
						<div class="white-background3">
							<h2>Vieux Port</h2>
						</div>
					</article>
					<div class="column2-art3">
						<article>
							<img class="photos-act-Marseille" src="paul-hermann-QFTrLdQIRhI-unsplash copie.jpg">
							<div class="white-background3">
								<h2>Port de Pomègues</h2>
							</div>
						</article>
						<article class="marg-top3">
							<img class="photos-act-Marseille" src="kevin-hikari-rV_Qd1l-VXg-unsplash.jpg">
							<div class="white-background3">
								<h2>Iles du Frioul</h2>
							</div>
						</article>
					</div>
					<article>
						<img class="photos-act-Marseille" src="kilyan-sockalingum-NR8-cBCN3aI-unsplash copie.jpg">
						<div class="white-background3">
							<h2>Parc National des Calanques</h2>
						</div>
					</article>
					<div class="2column-art3">
						<article>
							<img class="photos-act-Marseille" src="florian-wehde-xW9e8gdotxI-unsplash.jpg">
							<div class="white-background3">
								<h2>Notre-Dame-de-la-Garde</h2>
							</div>
						</article>
						<article class="marg-top4">
							<img class="photos-act-Marseille" src="lena-paulin-wH2-EJoDcV0-unsplash.jpg">
							<div class="white-background3">
								<h2>Parc Longchamp</h2>
							</div>
						</article>
					</div>
				</div>
			</section>
		</main>
		<footer>
			<section class="sec-4">
				<div class="col1-sec4">
					<h1 class="f-size">A propos</h1>
					<nav class="cols">
						<a href="">Fonctionnement du site</a>
						<a class="marg-phrases" href="">Conditions générales de vente</a>
						<a class="marg-phrases" href="">Données et confidentialité</a>
					</nav>
				</div>
				<div class="col2-sec4">
					<h1 class="f-size">Nos hébergements</h1>
					<nav class="cols">
						<a href="">Charte qualité</a>
						<a class="marg-phrases" href="">Soumettre votre hôtel</a>
					</nav>
				</div>
				<div class="col3-sec4">
					<nav class="cols">
						<h1 class="f-size">Assistance</h1>
						<a href="">Centre d'aide</a>
						<a class="marg-phrases" href="">Nous contacter</a>
					</nav>
				</div>
			</section>
	    </footer>
	</body>
</html>


body{
	font-family:'Raleway', sans-serif;
	margin-top: 0px;
}
.menu{
	font-size: 15px;
	display: flex;
	box-sizing: border-box;
	padding-right: 8px;
}
.menus3{
	margin-left: 150px;
	flex-direction: row;
}
.menu-hébergement{
	display: flex;
	text-decoration: none;
	color: #0065FC;
	margin-right: 67px;
	align-items: center;
	border-top: 2px solid #0065FC;
	box-sizing:border-box;
	height:100% ; 
	padding-left: 16px;
 	padding-right: 16px;
}
.menu-activités{
	color: black;
	text-decoration: none;
	margin-right: 69px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.menu-inscription{
	color: #0065FC;	
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
header{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	max-width: 1400px;
	box-sizing: border-box;
	padding-left: 50px;
	margin: 0 auto;
}
h1{
	font-size: 22px;
	box-sizing: border-box;
}
.big-title{
	display: flex;
	padding-top: 3px;
}
.comp-text{
	display: flex;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.input-group{
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	margin-top: -2px;
}
.input-group span{
	display: flex;
	background-color: #F2F2F2;
	align-items: center;
	border-radius: 17px 0px 0px 17px;
	font-size: 18px;
	padding-right:	19px;
	padding-left: 19px;
	box-sizing: border-box;
}
.input-group input{ 
  	border: 1px solid #f2f2f2;
  	border-left: 0;
  	border-right: 0;
 	font-weight: bold;
  	font-size: 18px;
  	margin: 0px;
 	box-sizing: border-box;
 	padding-left: 15px;
}
.input-group input: focus{
 	outline: none;
 	box-sizing: border-box;
}
.input-group button{
	border: none;
	background-color: #0065FC;
	border-radius: 0px 17px 17px 0px;
	color: #fff;
	font-weight:bold;
	padding: 15px 17px 15px 17px;
	font-size:18px; 
	margin:	0px;
	box-sizing:	border-box;
}
.flex-group{
	display:	flex;
	justify-content:	flex-start;
	align-items:	baseline; 
	box-sizing: border-box;
}
.group-filtres{
    display: flex;
    margin-top: 28px;
    border: none;
    box-sizing:	border-box;
    flex-wrap: wrap;
}
.filtres{
	display: flex;
	font-size: 18px;
	font-weight: bold;
	box-sizing: border-box;
	margin-top: -2px;
}
.money{
	display: flex;
	margin-left: 33px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 17px 15px 17px 15px;
	font-size: 16px;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.eco-button{
	display: flex;
	padding: 13px 30px 13px 65px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 36px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.economique{
	display: flex;
	align-items: center;
	margin-right: 18px;
	box-sizing: border-box;
}
.children{
	display: flex;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 18px 15px 18px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	margin-left: 15px;
	box-sizing: border-box;
}
.fam-button{
	display: flex;
	padding: 13px 23px 13px 56px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 17px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.familial{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.heart{
	display: flex;
	margin-right: 7px;
	margin-left: 10px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 16px 15px 14px 15px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}	
.rom-button{
	display: flex;
	padding: 13px 18px 13px 59px;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 11px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;	
}
.romantique{ 
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.dog{
	display: flex;
	margin-right: 20px;
	margin-left: 4px;
	background: #DEEBFF;
	border-radius: 50px 50px 50px 50px;
	padding: 15px 14px 15px 14px;
	font-size: 20px ;
	color: #0065FC;
	position: absolute; 
	box-sizing: border-box;
}
.anim-button{
	display: flex;
	padding: 13px 20px 13px 60px;
	font-weight: bold;
	background-color: #FFFFFF;
	border: 1px solid #DCDCDC;
	border-width: 1px;
	border-radius: 50px 50px 50px 50px;
	margin-left: 4px;
	font-weight: bold;
	font-size: 18px;
	box-sizing: border-box;
}
.animaux-autorises{
	display: flex;
	align-items: center;
	margin-right: 15px;
	box-sizing: border-box;
}
.complementary-info{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	box-sizing: border-box;
	margin-top: 20px;
}
.fa-info{
	display: flex;
	color: #0065FC;
	border-radius: 50px 50px 50px 50px;
	padding: 5px 8px 4px 8px;
	background: transparent;
	border: 2px solid #F2F2F2;
	box-sizing: border-box;
	font-size: 12px;
}
.text-complementary-info{
	display: flex;
	margin-left: 10px;
	box-sizing: border-box;
}
main{
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 30px;
	max-width: 1400px;
	margin: 0 auto;	
}
.Title-Marseille{
	display:flex;
	background-color: #F2F2F2;
	max-width: 884px;
	margin-top: 24px;
	border-radius: 20px 20px 0px 0px;
	padding-top: 42px;
	padding-left: 38px;
}
.flex-articles1{
	display: flex;
	max-width: 874px;
	flex-wrap: wrap;
	background-color: #F2F2F2; 
	margin-top: -19px;
	padding-left:10px;
}
.section1-art-unit1{
	margin-top: 24px;
	margin-left: 32px;
}
.section1-art-unit2{
	margin-top: 30px;
	margin-left: 32px;
}
.photos-Marseille{
	border-radius: 15px 15px 0px 0px;
	border: 5px solid white;
}
.white-fond{
	background-color: white;
	margin-top: -24px;
	border-radius: 0px 0px 15px 15px;
	padding-left: 15px;
}
.info-phrases{
	font-size: 14px;
	margin-bottom: 5px;
	margin-top: -8px;
}
h2{
	display: flex;
	font-size: 16px;
	padding-top: 11px;
}
.fa-star{
	display: flex;
	font-size: 11.5px;
	color: #0065FC;
	margin-right: -4px;
	padding-bottom: 10px;
}
#gray{
	color: gray !important;
}
.plus-Marseille{
	display: flex;
	font-size: 17px;
	font-weight: bold;
	background-color: #F2F2F2;  
	max-width: 848px;
	padding-top: 41px;
	padding-left: 36px;
	padding-bottom:47px;
	border-radius: 0px 0px 20px 20px;
}
.first-2sectors{
	display: flex;
}
.all-group-popular{
	display: flex;
	flex-direction: column;
	margin-left: 40px;
}
.article{
	display: flex;
	flex-direction: row;
	max-width: 300px; 
}
.popular-first-phrase{
display: flex;
align-items: baseline;
justify-content: space-between;
background-color: #F2F2F2; 
max-width: 420px;
border-radius: 20px 20px 0px 0px;
padding-left: 38px;
padding-bottom: 8px;
margin-top: 24px;
padding-top: 23px;
}
.fa-chart-line{
	display: flex;
	font-size: 22px;
	padding-right: 40px;
}
.group-popular{
	display: flex;
	flex-direction: column;
}
.article2-1{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.articles2{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 32px;
}
.all-articles2{
	background-color: #F2F2F2;
	max-width: 420px;
	padding-left: 36px;
	border-radius: 0px 0px 20px 20px;
	padding-right: 40px;
}
.photos-popular{
	border: 5px solid white;
	border-radius: 20px 0px 0px 20px;
}
.white-background2{
	display: flex;
	flex-direction: column; 
	align-items: stretch;
	background-color: white;
	border-radius: 0px 20px 20px 0px;
	padding-left: 17px;
	padding-right: 38px;
}
.max-width-popular{
	display: flex;
	max-width: 150px;
	align-content: stretch;
}
.popular-P{
	font-size: 14px;
}
#h1-act-Marseille{
	margin-top: 61px;
}
.photos-act-Marseille{
	border-radius: 15px 15px 0px 0px;
}
.white-background3{
	background-color: white;
	border-radius: 0px 0px 15px 15px;
	max-width: 289px;
	padding-bottom:4px;
	padding-left: 19px;
	padding-top:10px;
	margin-top: -17PX;
}
.All-articles3{
	display: flex;
	max-width: 1342px;
	justify-content: space-between;
	margin-top: 24px;
}
.marg-top3{
	margin-top: 45px;
}
.marg-top4{
	margin-top: 41px;
}
a{
	text-decoration: none;
	color: black;
}
.sec-4{
	padding-top: 31px;
	display: flex;
	justify-content: space-between;
	max-width: 1021px;
}
p{
	font-size: 16px;
}
.f-size{
	font-size:18px;
}
.cols{
	display: flex;
	flex-direction: column;
	font-size: 16px;
	padding-bottom: 84px;
	padding-top: 5px;
}
.col2-sec4{
	margin-right: 57px;
}
.marg-phrases{
	margin-top: 13.5px;
}
article{
	border-radius: 20px 20px 20px 20px;
	box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
footer{
	padding-left: 50px;
	padding-right: 50px;
	background-color: #F2F2F2; 
	max-width: 1400px;
	margin: 58px auto 0; 
	box-sizing: border-box;
}![ttt|690x475](upload://qdltsSBapWALmuUq8I2KFwfkkBU.jpeg) 

Yes your original code works very well - for large viewports. But it doesn’t work for narrow viewports.

You have two containers in your header, A and B. A has one child, and B has 3 children, and they’ re currently displayed in a row like this:

A-1              B-1   B-2   B-3

Now you want to display them like this:

A-1        B-3
 B-1      B-2

That’s simply not possible with your current HTML structure, unless you use position:absolute or other trickery for some/all of them.

You can solve this with flexbox (hard) or grid (simple), but either way, all the four child elements have to be in one container, as direct descendants. You can’t have two separate parent containers A and B. If you insist that you want those two containers, there is no clean solution or this.

1 Like

Thank you very much :two_hearts: