当我缩小窗口大小时，为什么我的容器会缩小并留下空白

Question

我是网络开发新手，我在我的网站中遇到了一个问题，当我减小窗口大小以使其响应时，我的容器缩小并留下空白..

我尝试在 yt、chatgpt 中查找，但我无法理解它是填充还是我给主页容器内的 div 的边距大小。

HTML CODE

        <section className="homepage-container">
            <section className="homepage-container-line-wrapper">
                <section className="homepage-container-line"></section>
            </section>
            <section className="homepage-container-text">
                    <h1 className="homepage-container-msg">Let's build from here</h1>
                    <h3>The world's leading AI-powered developer platform</h3>
                    <div className="button-wrapper">
                        <input class = "input-github" type="text" placeholder = "Email address " />
                        <button class = "sign-up-github-button">Sign up for Github</button>
                        <button class = "start-enterprise-button">Start a free enterprise trail</button>
                    </div>
                    <p className="homepage-container-promoter-msg">Trusted by the world's leading organization</p>
                    <section class = "homepage-container-link">
                        <img src="https://github.githubassets.com/assets/3m-0151c2fda0ce.svg" alt="" />
                        <img src="https://github.githubassets.com/assets/kpmg-c249f20c5173.svg" alt="" />
                        <img src="https://github.githubassets.com/assets/mercedes-fcf97d2d6ec4.svg" alt="" />
                        <img src="https://github.githubassets.com/assets/sap-96248a56d312.svg" alt="" />
                        <img src="https://github.githubassets.com/assets/pg-f1f19955c4e4.svg" alt="" />
                        <img src="https://github.githubassets.com/assets/telus-df0c2109df99.svg" alt="" />
                    </section>
            </section>
        </section> 

CSS CODE

.homepage-container{
    box-sizing: border-box;
    background-image: url("https://github.githubassets.com/assets/hero-desktop-a38b0fd77b6c.webp");
    background-size : 60%;
    background-repeat: no-repeat;
    background-position: top 0px right 0px;
    box-sizing: border-box;
    display : grid;
    grid-template-columns: 5% 80%;
    background-color : #0d1117;
    width : 100%;
    height : 100%;
}

.homepage-container-text{
    display : flex;
    flex-direction: column;
    padding : 10% 0;    
}

.homepage-container-text-wrapper{
    padding : 0 10%;
}

.homepage-container-text{
    color : white;
    margin: 20% 10%;
    width : 100%;
}
.homepage-container-text input::placeholder{
    padding : 0 10%; 
}
.homepage-container-text input{
    width : 25%;
    border-radius : 5px;
    height : 13%;
    margin : 5% 0;
    border-style : none;
}

.homepage-container-text button{
    display : none;
    width : 80%;
    border-radius : 5px;
    height : 13%;
    margin : 10px 0;
    border-style : none;
}

.button-wrapper{
    max-height : 15%;
}

.input-github{
    height : 100%;
}

.homepage-container-msg{
    font-size: 5rem;
}

.homepage-container-img{
    width : 100%;
    height : 100%;
}

.homepage-container-promoter-msg{
    margin : 4% 0%;
    font-size: 0.8rem;
}

.homepage-container-line-wrapper{
    box-sizing :border-box;
    margin : 5rem 2rem 5rem 2rem;
    width : 100%;
    display : flex;
    justify-content: center;
    height : 75%;
}

.homepage-container-line{
    border-color : white;
    border-width : 0 0 0 3px;
    border-style: solid;
}

.homepage-container-msg{
    background-color: transparent;
}

.homepage-container-link{
    width: 100%;
    display : flex;
    justify-content: space-between;
}

.sign-up-github-button{
    font-size: 0.8rem;
    color : white;
    border-style : none;
    height : 13%;
    border-radius: 5px;    
}

@media (max-width : 905px){
    .homepage-container{
        width : 100%;
    }
}

WHATS HAPPENING

我尝试过的：使用 calc(100% - padding/margin space) box-sizing : border-box