Fix the vertical and horizontal positionnings of the content of the columns of the footer.

Author: HaudinFlorence

src/components/footer/Footer.tsx

@@ -25,18 +25,18 @@ export default function Footer() {
       <div className={"row"} style={{ paddingBottom: "var(--ifm-spacing-xl)" }}>
         <div
           className={
-            "col flex-full-centered" + " " + styles.social_media_desktop
+            "col flex-horizontally-centered" + " " + styles.social_media_desktop
           }
         >
           <SocialMediasQuantStack />
         </div>
-        <div className={"col"}>
+        <div className={"col flex-horizontally-centered"}>
           <div className={"container" + " " + styles.menu_container}>
             <div style={{ textAlign: "center" }}>
               <b>Menu</b> <br />
             </div>
             <div className="row">
-              <div className="col">
+              <div className="col flex-horizontally-centered">
                 <ul>
                   <li>
                     <Link href={"/home"}>Home</Link>
@@ -50,7 +50,7 @@ export default function Footer() {
                   </li>
                 </ul>
               </div>
-              <div className="col">
+              <div className="col flex-horizontally-centered">
                 <ul>
                   <li>
                     <Link href={"/services"}>Services</Link>
@@ -67,7 +67,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="col">
+        <div className="col flex-horizontally-centered">
         <div className={styles.social_media_mobile}>
           <SocialMediasQuantStack/>
         </div>

src/css/custom.css

@@ -69,6 +69,11 @@
   justify-content: center;
 }
 
+.flex-horizontally-centered {
+  display: flex;
+  justify-content: center;
+}
+
 .horizontally-centered {
   justify-content: center;
 }