Décrivez ici votre problème ou ce que vous cherchez à faire.

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

"`

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

container{

width: 100%;; 
height: auto; 
margin: 0 auto; 
display: block;

}

header_div1{

width: 60%;
margin: 0 auto;
margin-bottom: 200px;
display: flex;
justify-content: space-between;

}

header{
width: 100%;
height:600px;
margin: 0 auto;
display: inline-block;
background-image: url("../images/header-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}

.logo{
width: 250px;
height: auto;
margin-top: 20px;
display: block;
}

.menu{
width: 200px;
height: auto;
margin-top: 20px;
margin-right: 300px;
float: right;
}

ul{
width: 400px;
display: flex;
justify-content: space-around;
list-style-type: none;
align-content:flex-end;
}

.menu ul li a{
text-decoration: none;
color: white;
}

title{

display: block; 
text-align: center;
margin: 0 auto;
width: 40%;

}

h1{
color: white;
margin-bottom: 100px;

}

bouton{

width: 150px;
height: 40px;
margin: 0 auto;
color: white;
border-radius: 5px;
background-color: #D3BF0B;
border: white;

}

section1{

width: 80%;
margin: 0 auto;
padding: 50px, auto 50px auto;
display: block;
justify-content: space-around;

}

h2 {

text-align: center;
margin-top: 50px;
margin-bottom: 30px;

}

section1 p{

text-align: center;
margin-bottom: 50px;
color: darkgrey;

}

.articles{
width: 90%;
height: 450px;
margin: 0 auto;
display: flex;
text-align: center;
justify-content: space-between;

}

.article_services{
width: 30%;
display: block;
text-align: center;

}

h3{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

.article_services p{
line-height: 2;
}

section2{

width: 100%;
height: auto;
display: block; 
padding-top: 50px;
text-align: center;
background-color: lightgray;

}

portfolio_images{

width: 80%;
height: auto;
margin: 0 auto ;
padding: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between; 

}

section2 p{

 display: block; 
 text-align: center;
 margin-bottom: 30px;

 font-size: 1em;
 font-style: italic;
 color: darkgray;

}

portfolio_images article{

width: 30%;
height: auto; 
margin-bottom: 20px;
text-align: center;
background-color: white;

}
.galerie{
width: 100%;
}

footer{
width: 100%;
}

formulaire{

width: 100%; 
height: auto;
padding: 50px 0;
background-color: black;
background-image: url("../images/map-image.png");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;

}

formulaire h2{

color: white;
margin-top: 50px;
margin-bottom: 50px;

}

formulaire p {

color: white;
text-align: center;
margin-bottom: 30px;

}

form{
width: 100%;
height: auto;
margin:0 auto;
padding: 0;
display: block;
}
.form_flex{
width: 72%;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

.coordonnees, .message{
width: 48%;

}
.coordonnees div{
width: 100%;
margin-bottom: 30px;
}

.coordonnees div input{
width: 100%;
height: 50px;
}

.message textarea{
width: 100%;
height: 210px;
}

.reseauxsociaux{
width: 30%;
height: auto;
margin: 0 auto;

}

.button{
text-align: center;

}

.button button{
padding: 10px 40px;
background-color: #FFC800;
opacity: 80%;
color: white;
font-weight: 700;
}

footer{

width: 100%;
background-color: white;
display: flex;
justify-content: space-between;

}

footer p {

width: 30%; 
height: auto;
margin:  0 auto;  

}

footer div:nth-child(2){

width: 30%; 
height: auto; 
display: flex;

}

.confidentialite a {
color: black;
text-decoration: none;
}

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

#container{
    width: 100%; 
}

#section2{
    flex-wrap: wrap;
}

#portfolio_images article{
    width: 48%;
} 

#footer{
    flex-direction: column;
    text-align: center;
    }

.header {
width: 100%;
height: auto;
margin: 50px auto;
z-index: 3;
}

.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}

.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
}

.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}

.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}

.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
background-color: white;
opacity: 60%;
}

.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.header .menu-icon .navicon:before {
top: 5px;
}

.header .menu-icon .navicon:after {
top: -5px;
}

nav .menu{
    width: 400px;
    display: block;
    color: white;
}

.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}

.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.header .menu-icon .navicon:before {
top: 5px;
}

.header .menu-icon .navicon:after {
top: -5px;
}

.header .menu-btn {
display: none;
}

.header .menu-btn:checked ~ .menu {
max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}

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

header{
    width: 100%; 
    height: auto;
    flex-direction: column; 
}
#main_logo{
    margin: 20px auto;

}
#header_div1{
    width: 90%;
    display: block;
    margin: 0 auto;
}

.header li {
float: left;

}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}

} 

.articles{
    width: 100%; 
    height: auto;
    flex-wrap: wrap;

       }

.article_services{
    width: 100%;

}

#portfolio_images article{
    width: 100%;
}
#portfolio_images{
    flex-wrap: wrap;
}

#footer{
    flex-direction: column;
    text-align: center;
}

.form_flex{
    width: 100%;
    display: block;
    margin: 0 auto;
}
#infos{
    width: 100%;
    margin: 0 auto;
}

.coordonnees, .message{
width: 100%;
    margin: 0 auto;
    padding: 0 50px;

}

#portfolio_images{
padding: 0; 

}

#title{
    width: 90%;
    margin-bottom: 130px;
}
.menu{
width: 100%;;
height: auto; 
margin: 20px auto;
float: none;

}
ul{
width: 100%;;
}

.menu ul li{
    width: calc(100% / 5);
} 

}
`"
Ce que je veux

Décrivez ce que vous cherchez à obtenir.

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(