重新调整后如何使背景图片适合不同的分辨率和浏览器大小

Question

我一直在尝试将background-image调整为适合不同的分辨率和浏览器大小，但是当浏览器或分辨率调整为向左滚动或向左滚动时，它仍然不能很好地在右侧留下较大的空白。正确，但是在全屏模式下非常适合我的PC。我的按钮也无法调整为建议的浏览器大小。任何人都可以帮忙。 problem

header {
  background-image: url('laptop-4-wallpaper-3840x2160-1024x576.jpg');
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: inherit;
} 
    <header>

    <div class = "row">
    <ul class ="main-nav">
        <li> <a href = ""> HOME </a> </li>
        <li> <a href = ""> ABOUT </a> </li>
        <li> <a href = ""> SERVICES</a> </li>
        <li> <a href = ""> NEWS </a> </li>
        <li> <a href = ""> CONTACT </a> </li>
        <li> <a href = ""> FAQ </a> </li>
    </ul>
    </div>
    <div class = "banner">
        <img class = "banner-image" src = "pngkey.com-apple-logo-png-170591.png" >
    </div>