Hello,
I have 4 questions concerning my HTML and CSS code.
(see also the photo).
The padding-top of my header must be lager. But when I widen it the top-border goes down too…
I can’t align the icon “I” and the phrase.
3.Where this margin comes from???I didn’t put margins…
Thank you in advance for your help.
May we see your code please? 
Without seeing your code, one thing you can do to troubleshoot, would be to use …
* { margin: 0; padding: 0; box-sizing: border-box; }
at the top of your css file to clear any default margins / padding applied by the browser.
@thundermoth Sorry I forgot 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="(min-width:600px)" href="reservia.css">
<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="logo">
<img src="Reservia.svg">
</p>
<nav class="nav-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>
<!--class "petite-resolution" is for mobile(from 320px to 414px)-->
<header class="petite-resolution">
<div>
<div class="line1">
<p class="logo">
<img src="Reservia.svg">
</p>
<nav>
<a class="menu-inscription" href="">S'inscrire</a>
</nav>
</div>
</div>
<nav class="line2">
<a class="menu-hébergement" href="">Hébergements</a>
</nav>
</header>
<main>
<div class="margin-top"><!--class "margin-top" is for small resolution-->
<h1 class="big-title padding-sides">Trouvez votre hébergement pour des vacances de rêve</h1><!--class "padding-sides" is for small resolution-->
<p class="comp-text padding-sides">En plein centre ville ou en pleine nature</p>
<nav class="input-group padding-sides"><!--class "padding-sides" is for small resolution-->
<span class="map-marker"><!--span est un conteneur générique en ligne (inline)-->
<i class="fas fa-map-marker-alt"></i><!--Localisation icon-->
</span>
<input type="text" value="Marseille,France">
<button>Rechercher</button>
<span class="search"><!--class "search" is for small resolution-->
<i class="fas fa-search" media="(max-width: 600px)"></i><!--search icon-->
</span>
</nav>
<form class="group-filtres"method="post" action="traitement.php" padding-sides">
<h1 class="filtres">Filtres</h1>
<div class="small-form"><!--class "small-form is for small resolution-->"
<nav class="eco-small">
<span class="mon-small">
<i class="fas fa-money-bill-wave"></i><!--money icon-->
</span>
<button class="eco-b-small">Économique</button>
</nav>
<nav class="fam-small">
<span class="chil-small">
<i class="fas fa-child"></i><!--children icon -->
</span>
<button class="fam-b-small">Familial</button><!--man hands up icon-->
</nav>
</div><!--class "small-form ends here-->
<nav class="group-eco">
<span class="money">
<i class="fas fa-money-bill-wave"></i><!--icon money-->
</span>
<button class="eco-button">Économique</button>
</nav>
<nav class="group-familial" >
<span class="children">
<i class="fas fa-child"></i><!--children icon-->
</span>
<button class="fam-button">Familial</button><!--icon man hands up-->
</nav>
<nav class="group-romantic">
<span class="heart">
<i class="fas fa-heart"></i><!--icon heart-->
</span>
<button class="rom-button">Romantique</button>
</nav>
<nav class="group-animaux">
<span class="dog">
<i class="fas fa-dog"></i><!--icon dog-->
</span>
<button class="anim-button">Animaux autorisés</button>
</nav>
</form>
<div class="group-info padding-sides"><!--class "padding-sides" is for small resolution-->
<span>
<i class="fas fa-info"></i><!--icon "I" for information-->
</span>
<p class="text-info">Plus de 500 logements sont disponibles dans cette ville</p>
</div>
</div>
<div class="group-mars-and-pop"><!--Layout of first two sectors -->
<section class="group-marseille"><!--First sector-->
<h1 class="titre-marseille">Hébergements à Marseille</h1>
<div class="all-art-mars"><!--flexbox of articles(first sector) -->
<article class="line1-art-mars">
<img class="photos-Marseille" src="marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<img class="photos-small-mars" src="large-1.jpg">
<div class="conteneur">
<h2 class="h2-heb-mars">Auberge la Cannebière</h2>
<p class="prix-heb-mars">Nuit à partir de 25€</p>
<div class="star-group-mars">
<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="line1-art-mars">
<img class="photos-Marseille" src=" fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<img class="photos-small-mars" src="large-2.jpg"><!--photos of small resolution-->
<div class="conteneur">
<h2 class="h2-heb-mars">Hôtel du port</h2>
<p class="prix-heb-mars">Nuit à partir de 52€</p>
<div class="star-group-mars">
<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="line1-art-mars">
<img class="photos-Marseille" src=" reisetopia-B8WIgxA_PFU-unsplash.jpg">
<img class="photos-small-mars" src="large-3.jpg">
<div class="conteneur">
<h2 class="h2-heb-mars">Hôtel Les mouettes</h2>
<p class="prix-heb-mars">Nuit à partir de 76€</p>
<div class="star-group-mars">
<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="line2-art-mars">
<img class="photos-Marseille" src="annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<img class="photos-small-mars" src="large-4.jpg">
<div class="conteneur">
<h2 class="h2-heb-mars">Hôtel de la mer</h2>
<p class="prix-heb-mars">Nuit à partir de 46€</p>
<div class="star-group-mars">
<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="line2-art-mars">
<img class="photos-Marseille" src="nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<img class="photos-small-mars" src="large-5.jpg">
<div class="conteneur">
<h2 class="h2-heb-mars">Auberge Le Panier</h2>
<p class="prix-heb-mars">Nuit à partir de 23€</p>
<div class="star-group-mars">
<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="line2-art-mars">
<img class="photos-Marseille" src="febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<img class="photos-small-mars" src="large-6.jpg">
<div class="conteneur">
<h2 class="h2-heb-mars">Hôtel chez Amina</h2>
<p class="prix-heb-mars" >Nuit à partir de 96€</p>
<div class="star-group-mars">
<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="group-popular">
<div class="pop-title-and-icon">
<h1 class="titre-pop">Les plus populaires</h1>
<i class="fas fa-chart-line"></i>
</div>
<div class="all-art-pop">
<article class="art-pop">
<img class="photos-popular" src="emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<div class="all-text-pop">
<h2 class="h2-pop"> Hôtel Le Soleil du matin</h2>
<p class="prix-pop">Nuit à partir de 128€</p>
<div class="star-group-pop">
<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="art-pop">
<img class="photos-popular" src="aw-creative-VGs8z60yT2c-unsplash.jpg">
<div class="all-text-pop">
<h2 class="h2-pop"> Au coeur de l'eau Chabres d'hôtes </h2>
<p class="prix-pop">Nuit à partir de 71€</p>
<div class="star-group-mars">
<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="art-pop">
<img class="photos-popular" src="febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<div class="all-text-pop" >
<h2 class="h2-pop"> Hôtel Tout bleu et Blanc </h2>
<p class="prix-pop">Nuit à partir de 68€</p>
<div class="star-group-mars">
<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="group-act-mars">
<h1 class="titre-act-marseille">Activités à Marseille</h1>
<div class="all-art-act-mars">
<article class="art-act-m">
<img class="photos-act-Marseille" src="reno-laithienne-QUgJhdY5Fyk-unsplash.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Vieux Port</h2>
</div>
</article>
<div class="layout-horizontal-act-mars">
<article class="art-act-m">
<img class="photos-act-Marseille" src="paul-hermann-QFTrLdQIRhI-unsplash copie.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Port de Pomègues</h2>
</div>
</article>
<article class="art-act-m" class="marg-top3">
<img class="photos-act-Marseille" src="kevin-hikari-rV_Qd1l-VXg-unsplash.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Iles du Frioul</h2>
</div>
</article>
</div>
<article class="art-act-m">
<img class="photos-act-Marseille" src="kilyan-sockalingum-NR8-cBCN3aI-unsplash copie.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Parc National des Calanques</h2>
</div>
</article>
<div class="layout-horizontal-act-mars">
<article class="art-act-m">
<img class="photos-act-Marseille" src="florian-wehde-xW9e8gdotxI-unsplash.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Notre-Dame-de-la-Garde</h2>
</div>
</article>
<article class="art-act-m" class="marg-top4">
<img class="photos-act-Marseille" src="lena-paulin-wH2-EJoDcV0-unsplash.jpg">
<div class="all-text-act-mars">
<h2 class="h2-act-mars">Parc Longchamp</h2>
</div>
</article>
</div>
</div>
</section>
</main>
<footer><!--for gray background-->
<section class="group-footer">
<div>
<h1 class="h1-footer">A propos</h1>
<nav class="cols-footer">
<a class="footer-a" href="">Fonctionnement du site</a>
<a class="footer-a" href="">Conditions générales de vente</a>
<a class="footer-a" href="">Données et confidentialité</a>
</nav>
</div>
<div>
<h1 class="h1-footer">Nos hébergements</h1>
<nav class="cols-footer">
<a class="footer-a" href="">Charte qualité</a>
<a class="footer-a" href="">Soumettre votre hôtel</a>
</nav>
</div>
<div>
<h1 class="h1-footer">Assistance</h1>
<nav class="cols-footer">
<a class="footer-a" href="">Centre d'aide</a>
<a class="footer-a" href="">Nous contacter</a>
</nav>
</div>
</section>
</footer>
</body>
</html>
body{
font-family:'Raleway', sans-serif;
margin: 0 auto;
}
.grande-resolution{/* header for big resolution*/
display: flex;
justify-content: space-between;
max-width: 1366px;
box-sizing: border-box;
margin: 0 auto;
}
.logo{
}
.nav-menu{
display: flex;
flex-direction: row;
justify-content: space-between;
min-width: 490px;
}
.menu-hébergement{
display: flex;
align-items: center;
box-sizing:border-box;
text-decoration: none;
color: #0065FC;
border-top: 2px solid #0065FC;
padding-left: 16px;
padding-right: 16px;
}
.menu-activités{
display: flex;
align-items: center;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.menu-inscription{
display: flex;
align-items: center;
box-sizing: border-box;
text-decoration: none;
color: #0065FC;
font-weight: bold;
}
.petite-resolution{
display: none;
}
main{
box-sizing: border-box;
max-width: 1366px;
margin: 0 auto;
}
.big-title{
display: flex;
font-size: 22px;
}
.comp-text{
display: flex;
box-sizing: border-box;
}
.small-form{
display: none;
}
.input-group{
display: flex;
align-items: stretch;
box-sizing: border-box;
margin-top: 20px;
}
.map-marker{
display: flex;
background-color: #F2F2F2;
align-items: center;
border-radius: 15px 0px 0px 15px;
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;
width: 232px;
}
.input-group button{
border: none;
background-color: #0065FC;
border-radius: 0px 15px 15px 0px;
color: #fff;
font-weight:bold;
padding: 15px 17px 15px 17px;
font-size:18px;
margin: 0px;
box-sizing: border-box;
}
.input-group input: focus{
outline: none;
box-sizing: border-box;
}
.search{
display: none;
}
.group-filtres{
display: flex;
box-sizing: border-box;
flex-direction: row;
justify-content: space-between;
max-width: 940px;
align-items: baseline;
margin-top: 28px;
}
.filtres{
display: flex;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
}
.group-eco{
display: flex;
align-items: center;
box-sizing: border-box;
}
.money{
display: flex;
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;
font-weight: bold;
font-size: 18px;
box-sizing: border-box;
}
.group-familial{
display: flex;
align-items: center;
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;
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;
font-weight: bold;
font-size: 18px;
box-sizing: border-box;
}
.group-romantic{
display: flex;
align-items: center;
box-sizing: border-box;
}
.heart{
display: flex;
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;
font-weight: bold;
font-size: 18px;
box-sizing: border-box;
}
.group-animaux{
display: flex;
align-items: center;
box-sizing: border-box;
}
.dog{
display: flex;
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;
font-weight: bold;
font-size: 18px;
box-sizing: border-box;
}
.group-info{
display: flex;
justify-content: flex-start;
align-items: baseline;
box-sizing: border-box;
margin-top: 20px;
}
.fa-info{
display: flex;
color: #0065FC;
padding: 5px 8px 4px 8px;
border: 2px solid #F2F2F2;
border-radius: 50px 50px 50px 50px;
font-size: 12px;
}
.text-info{
display: flex;
margin-left: 10px;
box-sizing: border-box;
margin-left: 10px;
}
.group-mars-and-pop{
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 4px;
}
.group-marseille{
display: flex;
flex-direction: column;
max-width: 900px;
}
.titre-marseille{
display:flex;
background-color: #F2F2F2;
font-size: 22px;
border-radius: 20px 20px 0px 0px;
padding-left: 40px;
}
.all-art-mars{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #F2F2F2;
padding-left: 40px;
padding-right: 40px;
}
.line1-art-mars{
border-radius: 20px 20px 20px 20px;
box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
display: flex;
flex-direction: column;
}
.photos-Marseille{
border-radius: 15px 15px 0px 0px;
border: 5px solid white;
}
.photos-small-mars{
display: none;
}/*photos of small resolution*/
.conteneur{
background-color: white;
border-radius: 0px 0px 15px 15px;
padding-left: 15px;
}
.h2-heb-mars{
display: flex;
font-size: 16px;
margin-top: 4px;
margin-bottom: 4px;
}
.prix-heb-mars{
font-size: 14px;
margin: 0px;
}
.star-group-mars{
margin-top: 6px;
padding-bottom: 8px;
}
.fa-star{
color: #0065FC;
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 10px;
font-size: 11.5px;
}
#gray{
color: gray !important;
}
.line2-art-mars{
border-radius: 20px 20px 20px 20px;
box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
display: flex;
flex-direction: column;
}
.plus-Marseille{
display: flex;
font-size: 17px;
font-weight: bold;
background-color: #F2F2F2;
padding-top: 40px;
padding-left: 40px;
padding-bottom:46px;
border-radius: 0px 0px 20px 20px;
}
.group-popular{
display: flex;
flex-direction: column;
max-width: 450px;
}
.pop-title-and-icon{
display: flex;
justify-content: space-between;
align-items: baseline;
background-color: #F2F2F2;
border-radius: 20px 20px 0px 0px;
padding-left: 40px;
padding-right: 40px;
}
.titre-pop{
font-size: 22px;
}
.fa-chart-line{/*icon group popular*/
display: flex;
font-size: 22px;
}
.all-art-pop{
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #F2F2F2;
border-radius: 0px 0px 20px 20px;
}
.art-pop{
display: flex;
border-radius: 20px 20px 20px 20px;
box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
.photos-popular{
border: 5px solid white;
border-radius: 20px 0px 0px 20px;
}
.all-text-pop{
display: flex;
flex-direction: column;
max-height: 150px;
align-content: space-between;
background-color: white;
border-radius: 0px 20px 20px 0px;
padding-left: 17px;
padding-right: 38px;
max-width: 180px;
}
.h2-pop{
font-size: 16px;
}
.prix-pop{
font-size: 14px;
}
.star-group-pop{
}
.group-act-mars{
max-width: 1366px;
}
.titre-act-marseille{
display:flex;
font-size: 22px;
}
.all-art-act-mars{
display: flex;
max-width: 1366px;
justify-content: space-between;
margin-top: 24px;
}
.art-act-m{
border-radius: 20px 20px 20px 20px;
box-shadow: 3px 3px 7px #EDEDED, -3px -3px 7px #EDEDED;
}
.photos-act-Marseille{
border-radius: 15px 15px 0px 0px;
}
.all-text-act-mars{
background-color: white;
border-radius: 0px 0px 15px 15px;
padding-bottom:4px;
padding-left: 19px;
}
.h2-act-mars{
font-size: 16px;
}
.layout-horizontal-act-mars{
display: flex;
flex-direction: column;
justify-content: space-between;
}
footer{
padding-left: 50px;
padding-right: 50px;
background-color: #F2F2F2;
max-width: 1550px;
margin: 58px auto 0;
box-sizing: border-box;
}/*for gray background*/
.group-footer{
padding-top: 31px;
display: flex;
justify-content: space-between;
max-width: 1100px;
padding-bottom: 58px;
}
.h1-footer{
font-size:18px;
}
.cols-footer{
display: flex;
flex-direction: column;
font-size: 16px;
}
.footer-a{
margin-top: 7px;
text-decoration: none;
color: black;
}
p{
font-size: 16px;
}
Thank you very much. )
I’m a big fan of freeCodeCamp! and happy to help (when I have an answer 
) Keep coding!
Thank you, I’m a beginner. Soon I’ll start to help others too… <3
