Clipboard landing page master

Hello coders,

This is my first big project...and i can tell you it gave me a headache...hahaha I still stuggling with @media and then especially with the sizing of the background-image and the first lager image of the display . When i resize it from 1440px to 375px it does not scale perfectly. Can anyone tell me how to scale it perfectly so that it looks nice?

Also have a question on naming elements with classes like for example <ul class="list-menu"> I see some youtubers giving almost every element a class name like this:

<nav class="menu">
 <ul class="menu-list">
    <li class="menu-list-link"><a href="#" >FAQs</a></li>
    <li class="menu-list-link"><a href="#">Contact Us</a></li>
    <li class="menu-list-link"><a href="#">Privacy Policy</a></li>
    <li class="menu-list-link"><a href="#">Press Kit</a></li>
    <li class="menu-list-link"><a href="#">Install Guide</a></li>
 </ul>
</nav>

<nav class="nav>
  <ul>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Press Kit</a></li>
    <li><a href="#">Install Guide</a></li>
 </ul>
</nav>

Is it not better for readability to do when you styling your html: .nav ul li then making for every li a class name .menu-list-link?

Hope to get some feedback!

Thanks!