My image in the header overlaps with the next section's features (image-phone).
https://i.sstatic.net/4g0SO.jpg
I've tried changing the position and z-index types. If I crop the image, it's not ideal and difficult to fix ;)
How can I structure my image: using a div-class or just an img tag? In my code, I only used variables for img with class without div blocks. Is this clean?
<div class="container">
<nav id="main-nav">
<ul class="menu">
<li><a href="#">Tour</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li>
<h2 class="logo">NEWPROVIDENCE</h2>
</li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
<a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
</ul>
</nav>
<div class="showcase">
<h1>What will happen tomorrow?</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, ex maxime! Natus earum praesentium officiis adipisci qui nisi ut, laboriosam labore optio. Non quidem assumenda dolore consectetur, corrupti quae delectus.</p>
<a href="" class="video"><i class="fas fa-play"></i>Watch Video</a>
</div>
<img src="https://imgur.com/a/Ees14KN" class="phone-img" alt="">
</div>
</header>
<section id="main-features">
<div class="container">
<div class="features">
<div class="feature">
<i class="fas fa-clock fa-2x"></i>
<h2 class="m-heading">Real time all the time</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
</div>
<div class="feature">
<i class="fas fa-clock fa-2x"></i>
<h2 class="m-heading">Real time all the time</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
</div>
</div>
<hr>
</div>
</section>
header {
background: url('../img/bg-header.png') no-repeat center center / cover;
height: 100vh;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 2rem;
}
#main-nav ul {
display: grid;
grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
width: 100%;
list-style: none;
align-items: center;
text-align: center;
}
#main-nav ul li a {
padding: 0.75rem;
font-size: 16px;
margin: 0 0.25rem;
color: #26272d;
}
#main-nav ul li a:hover {
color: #bebebf;
}
.phone-img {
display: block;
margin: 0 auto;
}