尝试将含两个子div的容器设为flex row布局失败求助

核心问题：类名拼写不匹配 #

你的HTML容器类名是project-section，但CSS里的选择器写成了projects-section（多了一个s），这直接导致flex样式规则没作用到目标元素上，自然不会生效。

修正后的代码 #

HTML（无需改动） #

<div class="project-section">
    <div class="flex-projects-1">
        <p>Website</p>
        <h2>A website about hearing care for children</h2>
        <p>I built the site for the company I worked for,
            The site was built through the WordPress platform,
            through a clean template
        </p>
    </div>
    <div class="flex-projects-2">
        <p>test123</p>
    </div>
</div>

CSS（修正类名拼写） #

/* 修正类名，与HTML保持一致 */
.project-section {
    display: flex;
    /* 可选：添加gap控制子元素间距，优化布局 */
    gap: 2rem;
}

/* 同步修正后续关联选择器的类名 */
.project-section p {
    color: white;
    font-size: 18px;
}

.project-section h2 {
    color: white;
    font-size: 30px;
}

.flex-projects-2 p {
    border: 1px solid white;
    color: white;
}

可选优化提示 #

• 若需要子元素垂直居中，可给.project-section添加align-items: center
• 使用gap属性控制子div间距，比margin更简洁易维护

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