CSS: Проблемы масштабирования с разными разрешениями

function muteBtn() {
    var btn = document.getElementById("mute-btn");
    var vid = document.getElementById("video");
    var img = document.getElementById("img");

    btn.addEventListener("click", function() {
        if (vid.muted == false) {
            vid.muted = true;
            img.src = "bilder/mute.png";
        } else {
            vid.muted = false;
            img.src = "bilder/unmute.png"
        }
    });
}
function swapContent() {
    var btn0 = document.getElementById("btn0");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var btn4 = document.getElementById("btn4");
    var btn5 = document.getElementById("btn5");
    var btn6 = document.getElementById("btn6");
    var home = document.getElementById("p-home");
    var leben = document.getElementById("p-leben");
    var karriere = document.getElementById("p-karriere");
    var alben = document.getElementById("p-alben");
    var filme = document.getElementById("p-filme");
    var ausz = document.getElementById("p-ausz");
    var quellen = document.getElementById("p-quellen");

    var currentid = home;
    home.style.display = "block";

    btn1.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = leben;
        currentid.style.display = "block";
    });

    btn2.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = karriere;
        currentid.style.display = "block";
    });
    btn3.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = alben;
        currentid.style.display = "block";
    });
    btn4.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = filme;
        currentid.style.display = "block";
    });
    btn5.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = ausz;
        currentid.style.display = "block";
    });
    btn6.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = quellen;
        currentid.style.display = "block";
    });
    btn0.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = home;
        currentid.style.display = "block";
    });
}

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    margin: 5px;
}

header {
    position: fixed;
    display: block;
    font-family: Arial;
    color: white;
    width: 98%;
    max-height: 32%;
    margin: 10px;
    border: 1px solid white;
    background-color: black;
    text-align: center;
    overflow: hidden;
}

header h1 {
    border: 1px solid black;
    background-color: black;
    padding: 2px;
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
    display: inline-block;
    opacity: 0.9;
    overflow: hidden;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-position: center;
    object-fit: cover;
}
nav {
    position: fixed;
    margin: 16.44% 0 0 .7%;
    border: 1px solid white;
    width: 200px;
    min-height: 64.45%;
    padding: 5px;
}
.content-box    {
    position: relative;
    float: right;
    border: 1px solid white;
    height: 28.6em;
    width: 84.75%;
    overflow: scroll;
    padding: 10px 30px 30px;
    color: white;
    margin-top: 16.6%;
    margin-right: .63%;
    font-family: Arial;
    z-index: -1;
}
.button {
    background-color: black;
    text-decoration: none;
    font-size: 1.35em;
    border: none;
    color: white;
    position: relative;
    display:block;
    padding:10px;
    width: 180px;
    text-align: left;
    transition: 200ms;
}
#btn6 {
    top:80%;
}
.button:active {
    transform: translateX(5px);
}
.button:hover {
    background-color: white;
    color: black;
}
#mute-btn {
    float: right;
    position: absolute;
    background-color: transparent;
    border: none;
    padding: 4px;
    top: 82%;
    right: .125%;
    transform: scale(0.8);
    z-index: 2;
}
.content-box div p {
    line-height: 125%;
    font-size: 1.25em;
}
.content-box div h1 {
    color: white;
    font-weight: bold;
    font-size: 3em;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Eminem</title>
    <link rel = "stylesheet" type = "text/css" href = "css/indexstyles.css">
    <script src = "jscript/index.js"></script>
</head>
<body>
    <script>
        window.onload = function() {
            muteBtn();
            swapContent();
        }
    </script>
    <header>
        <h1 id = "head">EMINƎM</h1>
            <div class = "video">
                <video id = "video" autoplay muted loop src = "video/rap-god.mp4"></video>
            </div>
        <button type  = "button" id = "mute-btn"><image id = "img" src = "bilder/unmute.png"></image></button>
    </header>
    <nav>
        <button type = "button" class = "button"id = "btn0">Home</button>
        <button type = "button" class = "button"id = "btn1">Leben</button>
        <button type = "button" class = "button"id = "btn2">Karriere</button>
        <button type = "button" class = "button"id = "btn3">Alben</button>
        <button type = "button" class = "button"id = "btn4">Filme</button>
        <button type = "button" class = "button"id = "btn5">Auszeichnungen</button>
        <button type = "button" class = "button" id = "btn6">Quellen</button>
    </nav>
    <div class = "content-box">
        <div id = "p-home">
            <h1>Home: </h1>
            <p>Content</p>
        </div>
        <div id = "p-leben" style = "display:none">
            <h1>Leben: </h1>
            <p>Content</p>
        </div>
        <div id = "p-karriere" style = "display:none">
            <h1>Karriere: </h1>
            <p>Content </p>
        </div>
        <div id = "p-alben" style = "display:none">
            <h1>Alben: </h1>
            <p>3</p>
        </div>
        <div id = "p-filme" style = "display:none">
            <h1>Filme: </h1>
            <p>4</p>
        </div>
        <div id = "p-ausz" style = "display:none">
            <h1>Auszeichnungen: </h1>
            <p>5</p>
        </div>
        <div id = "p-quellen" style = "display:none">
            <h1>Quellen: </h1>
            <p>6</p>
        </div>
    </div>
</body>
</html>