When viewing my page on a tablet, I am experiencing issues with overlapping elements that do not appear in desktop or mobile views. I have tried adjusting the viewport width without success. Any guidance on how to resolve this problem would be greatly appreciated.
index.html
<!DOCTYPE html>
<html lang="en">
... (omitted for brevity)
main.css
#profile_text
{
margin-left:20px;
margin-right:20px;
}
.nav-phone>a:nth-child(3) {
background-color: #fbc076;
}
... (omitted for brevity)