body{ margin: 0; } .wrapper { max-width: 375px; width: calc(100% - var(5px)); margin: 0 auto; } @media screen and (min-width: 768px) { .wrapper{ max-width: 768px; width: calc(100% - var(15px)); } } @media screen and (min-width: 1140px) { .wrapper{ max-width: 1140px; width: calc(100% - var(30px)); } } /*Utilisation du css Layout Grid pour faire le wrapper*/ .grid-wrapper { display: grid; grid-template-columns: auto minmax(375px, 1440px) auto; grid-column-gap: 30px; } .grid-center { grid-column: 2/3; } .heading1 { font-family: "Poppins"; font-weight: 600; /*semi-bold*/ font-size: 6rem; /*96px*/ color: #394596; /*Bleu AGECEM*/ text-align: center; } .heading2 { font-family: "Poppins"; font-weight: 600; /*semi-bold*/ font-size: 1.5rem; /*24px*/ color: #394596; /*Bleu AGECEM*/ text-align: center; }