fix of an overlapping issue

src/components/footer/index.scss

@@ -2,8 +2,7 @@
 @use "../../scss/abstracts/fonts" as *;
 
 #footer {
-	position:relative;
-	bottom: 0;
+	position: relative;
 	background: $light;
 	padding: 1.5rem 0;
 	margin: 2rem auto 0 auto;

src/components/header/index.scss

@@ -10,7 +10,7 @@ header {
 	overflow-y: auto;
 	background-position: center;
 	background-size: cover;
-	padding-top: 5rem;
+	// padding-top: -4.5rem;
 	color: $light;
 
 	.hero {
@@ -26,7 +26,7 @@ header {
 			font-size: 2.5rem;
 			font-weight: 900;
 			font-family: "Cutive Mono";
-			color: $dark;	
+			color: $dark;
 		}
 
 		.hero-box {
@@ -61,12 +61,11 @@ header {
 		height: 100vh;
 
 		.hero {
-
-			h1{
+			h1 {
 				font-size: 2rem;
 			}
 
-			.hero-box > .hero-text{
+			.hero-box > .hero-text {
 				font-size: 1.1rem;
 			}
 		}

src/pages/nous-contacter.jsx

@@ -4,13 +4,13 @@ import Layout from "../components/layout";
 import Seo from "../components/seo";
 import ContactForm from "../components/contactForm";
 
-import "../scss/nous-contacter.scss";
+// import "../scss/nous-contacter.scss";
 
 const NousContacter = () => {
 	return (
 		<Layout>
 			<Seo title="Nous contacter" />
-			<div className="page-contact">
+			<div className="page-content">
 				<h2 className="page-title">Contactez nous</h2>
 				<ContactForm />
 			</div>

src/scss/main.scss

@@ -34,6 +34,8 @@ button:focus {
 main {
 	display: flex;
 	justify-content: center;
+	position: relative;
+	// padding-top: 4.5rem;
 }
 
 .btn {
@@ -51,8 +53,10 @@ main {
 }
 
 .page-content {
+	margin-bottom: 3rem;
+
 	.page-title {
-		padding-top: 5rem;
+		padding-top: 4.5rem;
 		text-align: center;
 	}
 

src/scss/nous-contacter.scss

@@ -1,6 +0,0 @@
-.page-contact {
-	padding-top: 5rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}