Problème Footer

Bonjour,

Je viens vers vous car je ne trouve aucune solution à mon problème​.

Je travaille actuellement sur mon site personnel et je n'arrive pas à résoudre un problème d'affichage dans mon footer.

Je m'explique.. mon footer est composé en 3 parties.

• La première partie est composé d'une flèche orientée vers le haut, qui sert d'encre pour remonter vers le header.
• La deuxième partie est composé d'une div avec une bordure en haut et en bas centrer à 20 % de la gauche et de la droite, cette partie contient mon adresse mon téléphone le nom de mon entreprise, ainsi que les liens vers mes réseaux sociaux et une page contact.
• La dernière partie se trouve tout en bas de la page c'est elle qui contient l'espace presse, les mentions légales, la politique et les conditions générales de mon site. La liste est séparé au centre par mon logo.

Code HTML

<!--Début Footer-->
  <footer>
     <div class="container_footer">
        <!--ANCRE HAUTE DE PAGE-->
        <div class="bouton_fleche">
            <a class="bouton_fleche" href="#haut_de_page" title="Haut de Page"></a>
        </div>
        <!--COORDONNER-->
        <div class="coord_footer">
          <div class="adresse_footer coord_footer_list">
            <h2><span>adresse<br>adresse- pays</span></h2> 
          </div>
          <div class="telephon_footer coord_footer_list">
            <h2><span>06 xx xx xx xx</span></h2> 
          </div>
          <div class="titre_site_footer coord_footer_list">
            <h1><span>Nomdusite</span></h1> 
          </div>
          <div class="logo_container_footer">
            <div class="sociaux_footer coord_footer_list">
              <h2><span># Suivez-moi</span></h2>
            </div>
            <div class="logo_fb_footer logo_sociaux_footer">
              <a class="logo_facebook" href="https://www.facebook.com/mapagefb/" target="_blank" title="facebook"></a>
            </div>
            <div class="logo_insta_footer logo_sociaux_footer">
              <a class="logo_instagram" href="https://www.instagram.com/mapageinsta/" target="_blank" title="instagram"></a>
            </div>
          </div>
          <div class="contact_footer coord_footer_list">
            <h2><span><a href="footer/contact.html" title="Contactez-Moi">Contact</a></span></h2>
          </div>
        </div>
        <!--MENTIONS LEGALES-->
        <div class="list_final_footer">
          <div class="list_final_footer_left list_total_final_footer">
            <h2>
              <a href="footer/espace_presse.html" class="spacing_footer"><span>Espace Presse</span></a>
              <a href="footer/mentions_legales.html" class="spacing_footer"><span>Mentions Légales</span></a>
              <a href="footer/conditions_generales.html" class="spacing_footer"><span>Conditions Générales</span></a>
              <a href="footer/cokkies.html">Cokkies</a>
            </h2>  
          </div>
          <div class="list_final_footer_right list_total_final_footer">
            <h2>
              <a href="footer/politique_de_confidentialite.html" class="spacing_footer"><span>Politique de confidentialité</span></a>
              <a href="footer/credit_photos.html" class="spacing_footer"><span>Crédit Photos</span></a>
              <img class="logo_copy_footer"src="../../IMG/png/logo_copyright_grey.png" alt="copyright"/><a href="footer/copyright.html" class="spacing_footer"><span>2019 monsite.com</span></a>
            </h2>
          </div>
        </div>
        <div class="logo_footer">
          <img src="../../IMG/png/logo_GB.png" alt="logo_GB">
        </div>

     </div>
  </footer>
<!-- Fin Footer-->

Code CSS

body{
  margin: 0px;
  padding: 0px;

}

/*DEBUT - container_footer*/
.container_footer{
  margin:0;
  left:0;
  padding:0;
  width: 100%;
  height: 400px;
  position: relative;
  background-color: rgb(71,84,101);
  box-shadow: 0px 10px 10px -10px rgb(27, 27, 27) inset;

}
/*FIN - container_footer*/

/*DEBUT - bouton_fleche*/
a.bouton_fleche{
 background-image: url(../IMG/png/fleche_footer_grey.png);
 position:absolute;
 left: 50%;
 transform: translateX(-50%) translateY(0%);
 border: 0;
 top: 20px;
 cursor: pointer;
 width: 23px;
 height: 23px;
 filter: drop-shadow(0 0 0.80rem black);

}

a.bouton_fleche:hover{
 filter: drop-shadow(0 0 0.60rem black);
 transition: 0.5s;
 background-image: url(../IMG/png/fleche_footer.png);

}
/*FIN - bouton_fleche*/

/*DEBUT - coord_footer*/
.coord_footer{
 width:  80%;
 position:absolute;
 top:60px;
 height: 150px;
 left: 10%;
 border-top: 1px solid #aeaeae;
 border-bottom: 1px solid #aeaeae;

}

.adresse_footer{
 height: 100%;
 width: 18%;
 left: 5%;
 top:0;
 position:absolute;

}

.adresse_footer h2{
 font-size: 18px;
 text-align: center;
 height: 150px;
 display: table;
 width: 100%;
 color: white;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.adresse_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.telephon_footer{
 height: 100%;
 width: 18%;
 left: 23%;
 top:0;
 position:absolute;

}

.telephon_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 20px;
 display: table;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.telephon_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.titre_site_footer{
 height: 100%;
 width: 18%;
 left: 41%;
 top:0;
 position:absolute;

}

.titre_site_footer h1{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 25px;
 display: table;
 text-shadow: 0px 1px 2px black;

}

.titre_site_footer h1 span{
 vertical-align:middle;
 display: table-cell;

}

.logo_container_footer{
 height: 100%;
 width: 18%;
 left: 59%;
 top:0;
 position:absolute;

}

.sociaux_footer{
 height: 100%;
 position:absolute;
 left: 0;
 width: 60%;

}

.sociaux_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 20px;
 display: table;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.sociaux_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.logo_fb_footer{
 height: 150px;
 position:absolute;
 left: 60%;
 width: 20%;

}

.logo_fb_footer a{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.logo_insta_footer{
 height: 150px;
 position:absolute;
 left: 80%;
 width: 20%;

}

.logo_insta_footer a{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);

}

.contact_footer{
 height: 100%;
 width: 18%;
 left: 77%;
 top:0;
 position:absolute;

}

.contact_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 font-size: 25px;
 display: table;
 font-family: calibri, sans-serif;

}

.contact_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.contact_footer h2 a{
 text-decoration:none;
 color: white;
 text-shadow: 0px 1px 2px black;
 transition: 0.5s;
}

.contact_footer h2 a:hover{
 text-shadow: 0px 1px 2px black;
 color: rgb(161, 161, 161);
}

.coord_footer_list h1{
 margin:0;
 padding:0;

}

.coord_footer_list h2{
 margin:0;
 padding:0;

}

a.logo_facebook{
 background: url(../IMG/png/logo_fb_grey.png) no-repeat;
 display: block;
 width: 24px;
 height: 24px;
 position: absolute;
 filter: drop-shadow(0 0 0.100rem black);

}

a.logo_facebook:hover{
 background: url(../IMG/png/logo_fb.png) no-repeat;
 transition: 0.5s;
 filter: drop-shadow(0 0 0.30rem black);

}

a.logo_instagram{
 background: url(../IMG/png/logo_insta_grey.png) no-repeat;
 display: block;
 width: 24px;
 height: 24px;
 position: absolute;
 filter: drop-shadow(0 0 0.100rem black);

}

a.logo_instagram:hover{
 background: url(../IMG/png/logo_insta.png) no-repeat;
 transition: 0.5s;
 filter: drop-shadow(0 0 0.30rem black);

}
/*FIN - coord_footer*/

/*DEBUT - list_final_footer*/
.list_final_footer{
 position: absolute;
 bottom: 15px;
 height: 14px;
 width: 100%;
 left: 0;
 z-index: 10;
}

.list_total_final_footer h2{
 font-size: 14px;
 margin: 0;
 padding: 0;
 word-spacing: 50px;
 font-family: calibri, sans-serif;

}

.list_total_final_footer h2 a{
 text-decoration: none;
 color: rgb(161, 161, 161);
 text-shadow: 0px 0px 2px #111111;
}

.list_total_final_footer h2 a:hover{
 color: white;
 text-shadow: 0px 0px 3px #000000;
 transition: 0.5s;
}

.spacing_footer span{
 word-spacing: 2px;

}

.logo_copy_footer{
 width: 14px;
 height: 14px;
 filter: drop-shadow(0 0 0.100rem black);
 margin: 0;
 padding: 0;
 top: 50%;
 transform: translateY(20%);
 padding-right: 2px;

}

.list_final_footer_left{
 width: 50%;
 left: 0;
 background-color: blue;
 position: absolute;

}

.list_final_footer_left h2{
 right: 30px;
 position: absolute;

}

.list_final_footer_right{
 width: 50%;
 right: 0;
 background-color: green;
 position: absolute;

}

.list_final_footer_right h2{
 left:30px;
 position: absolute;

}
/*FIN - list_final_footer*/

/*DEBUT - logo_footer*/
.logo_footer{
 width: 100%;
 position: absolute;
 bottom:10px;
 height: 40%;

}

.logo_footer img{
 position: absolute;
 left: 50%;
 transform: translateX(-50%) translateY(0%);
 height: 100%;
 filter: drop-shadow(0 0 0.20rem #111111);

}
/*FIN - logo_footer*/

J'ai obtenu le résultat final que je souhaitais. Cependant pas de façon responsive, en effet dès que je réduis la page les mots se montent les uns sur les autres.

Je soupçonne les valeurs en pourcentage que j'ai utilisé pour placer mes div​. Je suis convaincu que le problème vient de la. Je suis aussi conscient que je devrais mieux utiliser des listes pour placer mes liens, mais je ne sais pas comment m'y prendre.

Aidez-moi s'il vous plaît !!