我在这里的 CSS 网格缺少什么？为什么水平滚动条

Question

Horizontal Scroll Bar

问题：1

为什么#main-header .content-container .videos 上有一个水平滚动条。我可以用 overflow-x: hidden on body 摆脱它，但不明白为什么它首先存在。

/* Background and Left Side */

#main-header {
    background: #fff;
    height: 100vh;
    width: 100vw;
}

#main-header .content-container .social {
    display: flex;
    height: 100vh;
    width: 10vw;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#main-header .content-container .social i {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #333;
}

#main-header .content-container .social a {
    color: #333;
}

#main-header .content-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

/* Right Side */

#main-header .content-container .videos {
    height: 100vh;
    width: 90vw;
    background: #f4f4f4;
}

#main-header .content-container img {
    width: 330px;
    height: 200px;
}

#main-header .content-container .videos .grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

#main-header .content-container .videos .contain-video {
    display: flex;
    flex-direction: column;
}


#main-header .content-container .videos .contain-video .text-wrap {
    padding: 1rem 1rem;
    width: 330px;
}

问题 2：我不明白为什么我只看到 repeat(2,1fr) 我设置了最小宽度和最大宽度。我知道 repeat(2,1fr) 紧随其后，但我为此设置了最大宽度。

/* MEDIA 1230 */

@media (min-width:886px) and (max-width:1250px) {


/* Middle */

#main-nav .content-container .middle {
    width: 60%;
}

#main-nav .content-container .middle input {
    width: 55%;
    margin-left: 4rem;
}

/* Right Side */

#main-nav .content-container .right-side {
    width: 45%;
}

#main-header .content-container .videos .grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

}

/* 875PX */

@media(min-width:701px) and (max-width:885px) {

/* Left Side */

.content-container .left-side img {
height: 60px;
width: 120px;
}

/* MIDDLE */

#main-nav .content-container .middle {
    width: 80%;
}

#main-nav .content-container .middle input {
    width: 50%;
    margin-left: 2rem;
}

#main-nav .content-container .middle a {
    margin-right: 3rem;
    padding: 0.6rem 1.2rem;

}

/* Right Side */

#main-nav .content-container .right-side {
    width: 55%;
}

#main-nav .content-container .right-side .fas {
    margin-right: 0.5rem;
}

#main-nav .content-container .right-side a {
    padding: 0.65rem 0.45rem;
    font-size: 1rem;
}
}

/* Heading - Right Side */
#main-header .content-container .videos .grid-container {
    grid-template-columns: repeat(2,1fr);
}

HTML：

<!-- Header -->

   <header id="main-header">
    <div class="content-container">
        <div class="social">
            <a href="#"><i class="fas fa-user-circle"></i>Home</a>
            <a href="#"><i class="fas fa-user-circle"></i>Trending</a>
            <a href="#"><i class="fas fa-user-circle"></i>Subscriptions</a>
            <a href="#"><i class="fas fa-user-circle"></i>Library</a>
            <a href="#"><i class="fas fa-user-circle"></i>History</a>
        </div>
        <div class="videos py-2">
            <h2>Recommended</h2>
                    <div class="grid-container">

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>

                        <div class="contain-video">
                            <img src="./img/blink182feature_header.jpg" 
alt="blink">
                            <div class="text-wrap">
                                <h4>Mix - Blink 182 - Official Video</h4>
                                <h6>Blink 182, Taking Back Sunday and more</h6>
                            </div>
                        </div>
            </div>
        </div>
    </div>
   </header>

horizontal scroll still there after changed .videos width: 75vw

Answer 1

你应该减小宽度

#main-header .content-container .videos
{
height: 100vh;
width: 75vw;
background: #f4f4f4;
}