For some reason, my HTML and CSS are not functioning correctly. I am particularly confused about the behavior of the span element, as it seems to be working fine on other pages.
The footer does not seem to be interacting with any elements, causing it to stay at the very top of the page. (I even attempted moving the footer to the <footer> tag, but the issue persisted.)
An illustration of the problem can be found in the attached image below.
Below is a snippet of my code:
.aboutuspagetitle {
width: 100%;
color: rgba(159,74,74,1);
position: absolute;
top: 176px;
left: 660px;
font-family: Merriweather Sans;
font-weight: Bold;
font-size: 40px;
opacity: 1;
}
.aboutuspagedesc {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 313px;
left: 30px;
font-family: Merriweather Sans;
font-weight: normal;
font-size: 33px;
opacity: 1;
text-align: left;
}
.footer {
clear: both;
position: absolute;
height: 75px;
background-color: #121212;
font-family: Karla Tamil Upright;
color: white;
text-align: center;
left: 0px;
width: 300%;
}
.foot1{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
left: 568px;
font-family: Karla Tamil Upright;
font-weight: normal;
font-size: 18px;
opacity: 1;
text-align: center;
}
.foot2{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 45px;
left: 568px;
font-size: 14px;
opacity: 1;
text-align: center;
}<body>
<span class="aboutuspagetitle">ABOUT US</span>
<span class="aboutuspagedesc">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
</span>
<div class="footer">
<p class="foot1">THIS IS AN ADDRESS</p>
<a href="https://www.google.com"><span class="foot2">© 2021</span></a>
</div>
</body>