As I was designing a webpage for a new company, everything was perfect in the header except for the fact that we didn't have a logo yet. So, I decided to put a placeholder image in its place. Now that we finally have the actual logo and replaced the placeholder, the call to action button underneath has been unexpectedly pushed off screen. Despite there being countless tutorials on positioning available online, I find myself stuck and unable to resolve this issue!
<body>
<header>
<nav>
<div class="row">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<img src="img/test.png" width="500px" height="500px" alt="test">
<a class="btn" href="#">Get a Quick Quote</a>
</div>
</header>
header {
background-image: url(img/hero2.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 20%;
left: 60%;
}