CSS Grid容器无法占满页面，求助优化方案

我接触Web开发时间不长，今天刚学HTML和CSS基础，大部分效果都能实现，但碰到个解决不了的问题。

作为《Family Guy》粉丝，我正在挑战把自己在Figma上完成的设计还原成网页，现在整个页面内容都挤在一小块区域里，Grid容器没法占满页面。

我尝试给容器手动设置固定高度（<div class="container" style="height: 852px">），问题有所缓解，但会出现右侧滚动条，不太满意，想找更好的方案。

我的HTML代码 #

<!DOCTYPE html>
<head>
    <title>FamilyGuy</title>
    <link rel="stylesheet" type="text/css" href="./assets/css/styles.css">
</head>
<body>
    <div class="container">
        <div class="navbar">

        </div>
        <div class="card-1">
            <div class="card-image-container">
                <img class="card-image" src="./assets/img/Family_Guy_Season1.png">
            </div>
            <div class="card-title-container">
                <h3 class="card-title">Episode 1</h3>
            </div>
        </div>
        <div class="card-2">
            <div class="card-image-container">
                <img class="card-image" src="./assets/img/Family_Guy_Season1.png">
            </div>
            <div class="card-title-container">
                <h3 class="card-title">Episode 2</h3>
            </div>
        </div>
</body>
</html>

我的CSS代码 #

html {
    display: block;
    margin: 0;
    padding: 0;
}

body {
    background: #1E1E1E;
    font-family: 'Inter', sans-serif;
    border: 0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;

    max-width: 1920px;
    max-height: 1080px;

    grid-template-columns: [first] 18.23% [second] 2.6% [third] auto [fourth] 2.6% [fifth] auto [sixth] 2.6% [seventh] auto [eighth] 2.6% [ninth] auto [tenth] 2.6% [eleventh] 42.19%;
    grid-template-rows: [first] 2.78% [second] 2.78% [third] 5.28% [fourth] 13.89% [five] 3.06% [sixth] 19.44% [seventh] 2.6% [ninth] 19.44% [tenth] 2.6% [eleventh] 19.44% [twelveth] 2.6%;
}

div.navbar {
    background: #2F3136;

    max-width: 350px;
    max-height: 1080px;

    grid-column-start: first;
    grid-column-end: span second;
    grid-row-start: first;
    grid-row-end: span twelveth;
}

div.card-1 {

    position: inherit;

    background: #2F3136;

    max-width: 140px;
    max-height: 210px;

    grid-column-start: third;
    grid-column-end: span fourth;
    grid-row-start: sixth;
    grid-row-end: seventh;

    border-radius: 7.14%;
}

div.card-2 {

    position: inherit;

    background: #2F3136;

    max-width: 140px;
    max-height: 210px;

    grid-column-start: fifth;
    grid-column-end: span sixth;
    grid-row-start: sixth;
    grid-row-end: seventh;

    border-radius: 7.14%;
}

div.card-image-container {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 120px;
    max-height: 158.68px;

    border-radius: 7.14%;
    padding: 7.14%;
    border-radius: 7.14%;
    width: 85.71%;
    height: 75.56%;
}

img.card-image {
    display: flex;
    border-radius: 7.14%;
    justify-content: center;
}

div.card-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    max-width: 140px;
    max-height: 41px;
}

h3.card-title {
    display: flex;
    margin-bottom: 0;
    margin-top: .2em;
    margin-left: 0;
    margin-right: 0;
}

h3 {
    font-size: 1rem;
    color: #FFFFFF;
    font-weight: 500;
}

注：刚接触静态Web开发，代码可能有不少错误，这是第一次不依赖模板自己写，麻烦帮忙看看。

内容的提问来源于stack exchange，提问作者Monkee_coder