After extensive research, I have yet to find a solution to this peculiar issue. Despite using standard HTML and CSS, the code behaves unexpectedly when placed in its intended context. Take a look at the snippet below:
h1, h2, h3, h4, p {
position: relative;
margin-top: 2vw;
font-family: "Roboto Condensed Light", sans-serif;
color: white;
text-align: center;
}
.nav {
position: fixed;
top: 72px;
margin: 0px;
width: 384px;
font-size: 14px;
text-align:center;
letter-spacing: 7px;
opacity: .75;
text-shadow: 0px 0px 12px black;
z-index: 10;
/*cursor: pointer;*/
}
a {
color: inherit;
text-decoration: none;
}
body {background:black}<p class="nav">
<a href="#">MUSIC</a> VIDEO PHOTO ABOUT
</p>This code outlines the problem I am facing. The simple navigator I am developing appears as expected when tested in isolation. However, once integrated into the larger webpage, any text enclosed by an <a> tag shifts position and overlaps with other elements.
To see this issue firsthand, I have uploaded a preliminary version of the website. It may provide you with more insight on the problem.
Despite my efforts, I cannot seem to pinpoint the error causing this behavior. The fact that it works in a testing environment only adds to the confusion. This issue persists across all browsers.
Any suggestions or solutions would be greatly appreciated! Thank you in advance.