The Taylor Swift h1 goes on top of the navbar when i scroll down. How can i fix this?
<head id="main">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600&display=swap"
rel="stylesheet">
<title>Taylor Swift Tribute Page</title>
</head>
<body>
<header>
<nav id="navigation">
<a href="#home" class="links">HOME</a>
<a href="#biography" class="links">BIOGRAPHY</a>
<a href="#discography" class="links">DISCOGRAPHY</a>
<a href="#awards" class="links">AWARDS</a>
</nav>
</header>
<main id="home">
<section class="img-div">
<img class="evermore" src="https://assets.teenvogue.com/photos/5fd50da95521eee9e3546333/16:9/w_2560%2Cc_limit/BackCoverSquare_No%2520Text.jpg">
<div class="text">
<h1 id="title">Taylor Swift</h1>
<p>
</div>
</section>
html {
background-color: #141414;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #383333;
background: linear-gradient(90deg, #332e2e, #383333, #3b3434);
font-size: 25px;
}
#navigation {
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: 50px;
border-style: solid;
border-color: #141414;
border-width: 7px;
}
#navigation a {
text-decoration: none;
padding: 7px 125px;
color: #c4a187;
}
#navigation a:hover {
text-decoration: none;
text-shadow: 2px 2px #5c5656;
color: #dbb497;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: 49px;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
.evermore {
width: 100%;
height: auto;
}
.text {
position: absolute;
display: inline-block;
top: 150px;
left: 150px;
font-size: 80px;
font-family: 'Source Serif 4', sans-serif;
color: #262222;
}
body {
font-family: 'Source Serif 4', sans-serif;
overflow: auto;
}