Hello,
Can anyone help me please.
Why the header of my narrow viewports is not visible?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="(min-width:574px)" href="reservia.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 574px)" href="narrow-viewports.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="fontawesome-free-5.15.1-web/css/all.css">
<title>Réservia</title>
<meta charset="utf-8">
</head>
<body class="body">
<header class="grande-resolution">
<p class="menu">
<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>
<header class="petite-resolution">
<div classe="line1">
<p class="menu">
<img src="Reservia.svg">
</p>
<nav>
<a class="menu-hébergement" href="">Hébergements</a>
</nav>
<nav class="line2">
<a class="menu-activités" href="">Activités</a>
<a class="menu-inscription" href="">S'inscrire</a>
</nav>
</div>
</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;
}
.petite-resolution{
display: none;
}
.menu{
font-size: 15px;
display: flex;
box-sizing: border-box;
padding-right: 8px;
}
.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: 574px){
body{
font-family:'Raleway', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.grande-resolution{
display: none;
}
.line1{
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 70px;
padding-left: 70px;
}
.line2{
padding-top: 10px;
}
.menu-inscription{
margin-left: 50px;
align-items: center;
color: #0065FC;
text-decoration: none;
font-weight: bold;
padding-top: 10px;
box-sizing: border-box;
}
.menu-hébergement{
padding-left: 90px;
padding-right: 90px;
padding-bottom: 15px;
text-decoration: none;
color: #0065FC;
border-bottom: 2px solid #0065FC;
margin-left: 0px;
}
.menu-activités{
text-decoration: none;
padding-left: 112px;
padding-right: 112px;
color: #0065FC;
border-bottom: 2px solid #f2f2f2;
padding-bottom: 15px;
margin-left: 0px;
}
}
Thank you in advance.