How to hide the second half of the image?

Question

My image which is in the head touches on the next block (seaction features). (image-phone)

https://i.sstatic.net/4g0SO.jpg

I tried change types of position,z-index. If i cut the image its not cool and easy to fix ;)

And how can i variable my image: div-class or just img tag? In my code i just variable img with class without div blocks. Is it 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 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;
}

Answer 1

You could try to put the phone image inside of a div as a background image instead of embedding it into the html on the page.

If you remove the image from the html and add a div class="phone-image"(for example) instead, you can control the height and width of the div and add this to the css:

div .phone-image {
      background: url(../path-to-your-images-folder/images/yourphoto.jpg);
      background-size: cover;
      height: 100px; /* for example */
      width: 40%; /* for example 40% of the container width */
 }

You would also have to position it correctly on top of the other image by using a higher z-index and position: absolute; and then play around with top, bottom, left and right values (https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd)