我不知道如何为我的引导卡添加间距，并且当我向上滚动到卡片部分时我的页面不断重叠

Question

我正在创建一个滚动时具有不同部分的登陆页面。我有 2 个问题。

1. 当我向下滚动时，当我缩小屏幕时，第二部分的内容会与页面的顶部重叠。
2. 我想在我的卡片之间有均匀的间距，并且我已经尝试了一切，但是如果我添加间距..那么它会将卡片推到一个全新的行。我想要 2 张卡片，每行间距均匀。

HTML 代码

<section id="home">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-6 col-md-6 col-12">
                    <h1 class="mb-5">Unlock the Power of <span>Artifical Intelligence</span> for Personalization and Customer Engagement.</h1>
                    <h4 class="mb-4">Elevate Your Marketing with Our Latest E-book.</h4>
                    <button>DOWNLOAD NOW</button>   
                </div>
                <div class="hero2 col-lg-6 col-md-6 col-12">
                    <img class="img img-fluid" src="ai2.png" alt="img-of-ai">
                </div>
            </div>
        </div>
    </section>
    
        
    <section id="benefits">
        <div class="row container mx-auto">
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>

CSS 代码

#home{
    background-color: #22AADF;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top 60px center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#home h1{
    font-size: 3rem;
    color: #1F4682;
}
#home span{
    color: #fff;
}
#home h4{
    color: #fff;
    font-weight: 400;
}
#home .img {
    width: 100%;
    height: 100%;
}
#benefits {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}
#benefits .benefit{
    border: 3px solid #1F4682;
    border-radius: 10px;
    color: #fff;
    background-color: #22aadf;
}
#benefits .benefit .benefit-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 1.5em;
    text-align: center;
    margin: 15px;
}
#benefits .benefit i{
    margin-right: 20px;
}
#benefits .benefit h4{
     margin-top: 2px;
}
#benefits hr{
    color: #1F4682;
    width: 100%;
    height: 2px;
}

Answer 1

我自己制作了一段代码，并发现了以下内容：

问题1

这是因为在移动设备上，卡片的高度比屏幕尺寸更大。对于小屏幕，请删除

#benefits

上的 100vh。如果您不能 100% 确定其所有内容一定适合移动视口（高度方面），也许也适用于

#home

。

问题2

不适用于给定的代码示例，只有 3 张卡，不能“每行 2 张”，因为只有一行有 2 张卡。

如果还有更多卡片，那么您可以执行以下操作：

在

#benefits

：

display: flex;
flex-direction: row; //not column
align-content: space-around;
flex-wrap: wrap; //important to have rows

在

.benefit

：

将宽度放入

col-

类并添加

margin-bottom