My content (as it's supposed to be) is included under my Main tags however a section of my content appears in (inspect elements-see image) as not part of the Main and I believe this is why that section is overlapping over my footer.
I have doubled checked to see if something wrong with my content and it turned out it is because when I commented out my main content (in HTML and in CSS) and wrote a new one (just in html) it didn't overlap with my footer. The main problem is that this section (appears in the inspect element - see image) as attached to two columns (accordion and a column) that are in the other hand placed under my main tags and not overlapping with my footer so why only this part of these columns that are not contained within my main tags.
Kindly help me resolve this problem, also I am a beginner so probably I am missing something simple here. See below my code.
Thank you in advance
Here's my HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<meta name= "description" content= "this this a website that ">
<meta name="viewport" content= "width=device-width, initial-scale=1">
<meta name= "keywords" content= "law, african, regulation">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link href= "" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Algeria.css">
<title> Algeria </title>
<link rel="apple-touch-icon" sizes="57x57" href="icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<a href="index.html"><img src="logo4.bmp" ></a>
<nav>
<ul>
<ol><a href="About.html">About</a></ol>
<div class="line"></div>
<ol><a href="Contact.html">Contact</a></ol>
</ul>
</nav>
</header>
<main>
<div class= "index-banner">
<h1> Algeria </h1>
</div>
<div class="wrapper">
<div class= "Vline">
<section class= "box1">Country profile
<div class="lines"></div>
<h2>Capital city : Algiers (Alger)</h2>
<h3>Currency : Algerian Dinar (DZN)</h3>
<h4>Country calling code : +213</h4>
<h5>Official languages : Arabic, Berber</h5>
</section>
</div>
<div class="box2">
<button class="accordion">Banking & finance Law </button>
<div class="panel">
<ul>
<li>
<a href= "C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Loi 90-10 relative à la monnaie et au crédit.pdf" type= "application/pdf" target="_blank">Loi n°90-10 relative à la monnaie et au crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Loi N° 17-10 du 11 octobre 2017 complétant l’ordonnance N° 03-11 du 26 aout 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Loi n° 17-10 du 11 octobre 2017 complétant l’ordonnance N° 03-11 du 26 aout 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Règlement N°2012-03 du 28 Novembre 2012 relative à la lutte contre le blanchiment des capitaux et le financement du terrorisme.pdf" type= "application/pdf" target="_blank">Règlement n°2012-03 du 28 Novembre 2012 relative à la lutte contre le blanchiment des capitaux et le financement du terrorisme</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Règlement n° 20-04 relative aux conditions bancaires applicables aux opérations de change.pdf" type= "application/pdf" target="_blank">Règlement n° 20-04 relative aux conditions bancaires applicables aux opérations de change</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Ordonnance N° 03-11 DU 26 août 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Ordonnance n° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Ordonnance N° 10-04 du 26 août 2010 modifiant et complétant l’ordonnance N° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Ordonnance n° 10-04 du 26 août 2010 modifiant et complétant l’ordonnance n° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Instruction N°08-96 du 18 Décembre 1996 relative aux conditions de création et d'agrèment des bureaux de change.pdf" type= "application/pdf" target="_blank">Instruction n°08-96 du 18 Décembre 1996 relative aux conditions de création et d'agrèment des bureaux de change</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Instruction N°02-2007 du 31 Mai 2007 Relative aux Opérations Liées aux transactions courantes avec l'étranger.pdf" type= "application/pdf" target="_blank">Instruction n°02-2007 du 31 Mai 2007 Relative aux Opérations Liées aux transactions courantes avec l'étranger</a></li>
</ul>
</div>
<button class="accordion">Commercial Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Code du commerce.pdf" type="application/pdf" target="_blank" >Code du commerce</a></li>
<li> <a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\القانون التجـاري.pdf"type="application/pdf" target="_blank">القانون التجـاري</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 90-22 relative au registre de commerce.pdf" type="application/pdf" target="_blank">Loi n° 90-22 relative au registre de commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 2004-02 relative aux règles applicable aux pratiques commerciales.pdf" type="application/pdf" target="_blank" >Loi n° 2004-02 relative aux règles applicable aux pratiques commerciales</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 2004-08 relative aux conditions d'exercice activites commerciales.pdf" type="application/pdf" target="_blank" >Loi n° 2004-08 relative aux conditions d'exercice activites commerciales</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n°2018-05 relative au commerce electronique.pdf" type="application/pdf" target="_blank" >Loi n°2018-05 relative au commerce electronique</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Décret-2019-89 relatif aux modalités de conservation et de transmission des registres des transactions commerciales électroniques au centre national du registre de commerce.pdf" type="application/pdf" target="_blank" >Décret-2019-89 relatif aux modalités de conservation et de transmission des registres des transactions commerciales électroniques au centre national du registre de commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Ordonnance n 96-07 modifiant et complétant la loi n 90-22 relative au registre de commerce.pdf" type="application/pdf" target="_blank" >Ordonnance n 96-07 modifiant et complétant la loi n 90-22 relative au registre de commerce</a></li>
</ul>
</div>
<button class="accordion">Civil Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\Code civil.pdf"type="application/pdf" target="_blank" >Code civil</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\القانون الـمدنـي.pdf"type="application/pdf" target="_blank" >Code du commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\Code de procédure civile et administrative.pdf"type="application/pdf" target="_blank" >Code de procédure civile et administrative</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\قانون الإجراء ات المدنية والإدارية.pdf"type="application/pdf" target="_blank" >قانون الإجراء ات المدنية والإدارية</a></li>
</ul>
</div>
<button class="accordion">Competition Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Competition law\Décret du 2005 relatif aux autorisations des opérations de concentration.pdf"type="application/pdf" target="_blank" >Décret du 2005 relatif aux autorisations des opérations de concentration</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Competition law\Ordonnance nº03‐03 du 19 juillet 2003 relative à la concurrence.pdf" type="application/pdf" target="_blank" >Ordonnance nº03‐03 du 19 juillet 2003 relative à la concurrencee</a></li>
</ul>
</div>
<button class="accordion">Consumer Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Consumer Law\Dècret exècutif n° 13-378 relative à l'information du consommateur.pdf"type="application/pdf" target="_blank" >Dècret exècutif n° 13-378 relative à l'information du consommateur</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Consumer Law\Loi n° 09-03 du 29 Safar 1430 relative à la protection du consommateur et la répression des fraudes.pdf"type="application/pdf" target="_blank" >Loi n° 09-03 du 29 Safar 1430 relative à la protection du consommateur et la répression des fraudes</a></li>
</ul>
</div>
<button class="accordion">Criminal Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\Code pénal.pdf"type="application/pdf" target="_blank" >Code pénal</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\قانون العقوبـات.pdf"type="application/pdf" target="_blank" >قانون العقوبـات</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\Code de procédure pénale.pdf"type="application/pdf" target="_blank" >Code de procédure pénale</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\قانون الإجراءات الجزائيـة.pdf"type="application/pdf" target="_blank" >قانون الإجراءات الجزائيـة</a></li>
</ul>
</div>
<button class="accordion">Employment Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Employment law\Code du travail.pdf"type="application/pdf" target="_blank" >Code du travail</a></li>
</ul>
</div>
<button class="accordion">Family Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Family law\Code famille.pdf"type="application/pdf" target="_blank" >Code famille</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Family law\قانون الأسـرة.pdf"type="application/pdf" target="_blank" >قانون الأسـرة</a></li>
</ul>
</div>
<button class="accordion">Intellectual property Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-18 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-06 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux marques.pdf"type="application/pdf" target="_blank" >Loi n° 03-18 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-06 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux marques
</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-18 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموالفقة على الأمر رقم 03-06 المؤرخ في جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بالعلامات.pdf"type="application/pdf" target="_blank" >القانون رقم 03-18 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموالفقة على الأمر رقم 03-06 المؤرخ في جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بالعلامات
</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-19 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-07 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux bre.pdf"type="application/pdf" target="_blank" >Loi n° 03-19 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-07 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux brevets d'invention</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-19 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموافقة على الأمر رقم 03-07 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق ببراءات الاختراع.pdf"type="application/pdf" target="_blank" >القانون رقم 03-19 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموافقة على الأمر رقم 03-07 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق ببراءات الاختراع
l</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-17 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-05 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux dro.pdf"type="application/pdf" target="_blank" >Loi n° 03-17 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-05 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux droits d'auteur et aux droits voisins</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-17 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموافقة على الأمر رقم 03-05 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بحقوق المؤل.pdf"type="application/pdf" target="_blank" >القانون رقم 03-17 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003, يتضمن الموافقة على الأمر رقم 03-05 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بحقوق المؤل</a></li>
</ul>
</div>
<button class="accordion">Privacy Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Privacy Law\Loi n° 18-07 du 10 juin 2018 relative à la protection des personnes physiques dans le traitement des données à caractère personnel.pdf" type="application/pdf" target="_blank" >Loi n° 18-07 du 10 juin 2018 relative à la protection des personnes physiques dans le traitement des données à caractère personnel</a></li>
</ul>
</div>
<button class="accordion">Tax Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Loi de finance 2020.pdf"type="application/pdf" target="_blank" >Loi de finance 2020</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code des Impôts Directs et Taxes Assimilés.pdf"type="application/pdf" target="_blank" >Code des Impôts Directs et Taxes Assimilés</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code des Impots Indirects.pdf"type="application/pdf" target="_blank" >Code des Impots Indirects</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code de l'Enregistrement.pdf"type="application/pdf" target="_blank" >Code de l'Enregistrement</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code Procédures Fiscales.pdf"type="application/pdf" target="_blank" >Code Procédures Fiscales</a></li>
</ul>
</div>
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</script>
</div>
</div>
</main>
<footer>
Copyright © <script>document.write(new Date().getFullYear());</script>, Africa Law. All rights reserved. Terms of Use
</footer>
</body>
</html>
Here's my CSS code
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
html, body {
height: 100%!important;
}
main {
min-height: calc(100vh - 120px - 40px);
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* MY CODE*/
*{
text-decoration: none;
}
body {
background-color: white;
}
header {
background-color:white ;
width: 100% ;
height: 120px;
}
img {
position: absolute;
bottom: 512px;
margin-left:60px;
}
header nav ul {
position: absolute;
bottom: 510px;
right: 200px;
text-transform: uppercase;
display: block;
margin: 0 auto;
width: fit-content;
color: rgb(230, 227, 227);
}
header nav ul ol {
font-family: Playfair display ;
font-size: 20px;
color: #111;
display: inline-block;
list-style: none;
padding: 0 16px;
}
.line {
border-left : 2px solid silver;
height: 20px;
position: absolute;
left: 44%;
margin-left: -1px;
top: 0;
}
.lines {
border-bottom : 3px solid #C3AB73;
height: 10px;
width: 110px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
margin-top: 10px;
}
header nav ul ol a {
font-family: Playfair display;
font-size: 20px;
color: #111;
}
header .languages {
display: none;
}
/*INDEX*/
.index-banner {
overflow: auto;
position: relative;
}
.index-banner {
width: 100%;
height: 50vh;
background-image: url('coverpage.jpg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: table;
}
.index-banner h1 {
font-family: Playfair display;
font-size: 35px;
font-weight: 300;
color: white;
position: absolute;
padding-top: 150px;
left: 580px;
/*text-shadow: 0px 0px 4px white;*/
}
/* Styling Country*/
/*.container {
display: flex;
justify-content: space-around;
flex-direction: row;
height: 700px;
background: rgba(214,221,229,1) ;
width: 100%;
}*/
.wrapper{
margin: 0;
display: flex;
flex-direction:row;
height: 100%;
}
.Vline {
height: 670px;
width: 300px;
margin: -15px;
background-color: rgba(214,221,229,1) ;
overflow: hidden;
}
.box1 {
border-radius: 5px;
margin: 0 auto;
margin-top: 15px;
margin-left: 10px;
padding: 12px;
border: 10px black;
width: 77%;
height: 18%;
/*background-color:#7d93b0;*/
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
h2,h3,h4,h5,h6 {
border-radius: 1px;
margin: 1px;
margin-bottom: 0px;
padding: 3px;
font-family: Arial;
color: black;
background-color: whitesmoke;
}
h2:hover,h3:hover,h4:hover,h5:hover,h6:hover {
background-color:#C3AB73;
transition: 0.4s;
box-shadow:0 0 2rem 0 rgb(246, 233, 185);
cursor: pointer;
}
h2 {
margin-top: 9px;
}
/* Accordion*/
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: rgb(243, 243, 243);
color: #C3AB73 ;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid white;
outline: none;
transition: 0.4s;
font: 18px Lato, arial;
font-weight: bold;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #50422E;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: "\2B9B";
font-size: 18px;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2B99";
}
.box2 {
position: center;
bottom: 80px;
right:80px;
height: 70px;
width: 70%;
line-height: 50px;
margin:0 auto;
}
li {
list-style: none;
}
li:before {
content: "■";
padding-right: 13px;
color: #C3AB73;
}
a {
color: #38485c;
}
footer {
padding: 12px;
background-color: #50422E;
color: white;
text-align: center;
}
First off, and unrelated to your problem, you have an extra </script> at the bottom of your HTML document:
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</script> <!--<<< DELETE THIS GUY -->
From what I can tell, the weird overlap you're seeing is related to the height property set on .box2. You have the height set to 70px, but the content inside it far exceeds that height. If you remove that property, the height responds to the content inside of it. Additionally, you have the position set to center, which is an invalid parameter. Please refer to these guidelines: https://www.w3schools.com/cssref/pr_class_position.asp
I recommend trying relative positioning to see if it suits your needs here. I'm going to delete it from my JSFiddle example, but you can add it back if needed.
.box2 {
position: center; //<<< CHANGE TO position: relative OR DELETE
bottom: 80px; //<<< THIS PROPERTY DOESN'T WORK BECAUSE position IS INVALID
right:80px; //<<< THIS PROPERTY DOESN'T WORK BECAUSE position IS INVALID
height: 70px; //<<<DELETE ME
width: 70%;
line-height: 50px;
margin:0 auto;
}
Lastly, I recommend wrapping your footer text in a <p> or <span> tag, and then giving the <footer> some height. It's currently squished, which I think is contributing to your problem.
Here's a JSFiddle with the changes I've recommended: https://jsfiddle.net/2513cg6z/
Let me know if you need further clarification.