如何使用 html 和 css 实现此目的？

Question

我正在为自己创建一个作品集网站，但我是网络开发的初学者。我想在页面底部创建一个部分，其中图片中的“启动项目”框将是我的“关于”部分，其余部分将用作链接和版权的页脚。

目前看起来是这样的。我只需要一个位于“关于”部分下方的背景，从中间到底部，并且背景没有边距。

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>

#about {
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}[enter image description here](https://i.stack.imgur.com/dUTIz.png)

Answer 1

所以我所做的就是删除`margin-left

#about {
  /*  margin-left: 70px;
    margin-right: 5%;*/
    margin-bottom: 20%;
    margin-top: 80px;
    padding: 50px 100px;
    padding-bottom:100%;
    background:blueviolet;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>