页面div布局不均留白，flexbox列居中问题技术求助

修复方案 #

1. 解决侧边空白与.page3延伸过长问题

• 补全.page3的margin单位，添加宽度控制和溢出处理，同时重置父容器container3的默认边距：

.container3 {
    width: 100%;
    padding: 0;
    margin: 0;
}

.page3 {
    background-image: linear-gradient(#EDE4E0, #C8DBBE);
    position: relative;
    padding: 0;
    margin: -20px; /* 补全px单位 */
    width: 100%;
    overflow-x: hidden; /* 隐藏横向溢出，消除侧边空白 */
}

• 建议在全局样式中重置body默认边距，避免页面整体出现空白：

body {
    margin: 0;
    padding: 0;
}

2. 实现flexbox列居中对齐

给.work容器添加justify-content: center属性，让flex子元素在主轴上居中，换行后也保持居中：

.work{
    display:flex;
    gap:30px;
    padding-bottom: 70px;
    flex-wrap: wrap;
    justify-content: center; /* 添加此行实现居中 */
}

3. 修复文字颜色不生效问题

.worktxt的color属性缺少#前缀，修正后才能正确显示颜色：

.worktxt{
    font-family: 'Montserrat', sans-serif; 
    font-size: 50px;
    margin-top: 0px;
    padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 0px;
    letter-spacing: 3px; /* 补全px单位 */
    color: #61764B; /* 添加#前缀 */
}

修改后的完整代码 #

CSS部分

body {
    margin: 0;
    padding: 0;
}

.container3 {
    width: 100%;
    padding: 0;
    margin: 0;
}

.page3 {
    background-image: linear-gradient(#EDE4E0, #C8DBBE) ;
    position: relative;
    padding: 0;
    margin: -20px;
    width: 100%;
    overflow-x: hidden;
}

.fit{
    height:200px;
    width:200px;
    object-fit: cover;
    border: double;
}

.work{
    display:flex;
    gap:30px;
    padding-bottom: 70px ;
    flex-wrap: wrap;
    justify-content: center;
}

.worktxt{
    font-family: 'Montserrat', sans-serif; 
    font-size: 50px;
    margin-top: 0px;
    padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 0px;
    letter-spacing: 3px;
    color: #61764B;
}

p{
    font-family: 'Montserrat', sans-serif;
    word-break: break-all;
}

HTML部分（无需修改）

<section class="container3">
    <div class="page3">
        <div class="page3title">
            <h2 class="worktxt">My Work</h2>
        </div>
        <div class="work">
            <div class="boxes">
                <a href="/11.3 TinDog Project/index.html"><img  class= "fit" src="./assets/tindog.png"></a>
                <h3 class="workheader"> Tindog </h3>
                <p>A class project built using bootstrap.</p>
            </div>
            <div class="boxes">
                <a href="/10.3 Mondrian Project/index.html"><img class= "fit" src="./assets/mondrian.png"></a>
                <h3 class="workheader">Mondrian Painting</h3>
                <p>A class project that is constructed entirely by CSS Grid.</p>
            </div>
            <div class="boxes">
                <a href="/Capstone 2/index.html"><img class= "fit" src="./assets/portfolio.png"></a>
                <h3 class="workheader">Portfolio</h3>
                <p>My personal project designed using HTML and CSS.</p>
            </div>
        </div>
    </div>
</section>

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