I'm struggling with this code that displays an image of a broken layout when I try to move the p tag with the class .mailtext inside the footer instead of outside. It's been frustrating me for the past couple of days. The first p tag, which is the copyright text, is working fine but the second one isn't. Despite trying various solutions like adjusting the overflow, z-index, and increasing the size of the container div, nothing seems to fix it. As a student with limited experience, I could really use some suggestions. Any ideas?
.footer {
/* more info footer */
height: 200px;
background-color: black;
margin-top: 80px;
position: absolute;
right: 0;
left: 0;
overflow: hidden;
}
.rights {
/* copyright paragraph */
text-align: center;
color: white;
margin-top: 170px;
}
.mail {
/* mail icon properties */
position: relative;
bottom: 140px;
left: 377px;
}
.mailtext {
/* my email text properties */
position: relative;
color: red;
}
.feedback {
/* feedback icon properties */
position: relative;
bottom: 190px;
left: 430px;
}<footer class="footer">
<div class="moreinfo">
<!-- more info footer -->
<p class="rights">©2017 annu.com. All rights reserved.</p>
<a target="_blank" href="">
<img class="feedback" src="">
</a>
<img class="mail" src="">
<p class="mailtext"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7a7a7a7a7a7a5b7c767a727735787476">[email protected]</a></p>
</div>
</footer>