CSS Flexbox布局下h2标签无法居左对齐的问题排查

你给.logo-header-home和.button-header-home都加了flex:1，这会让两个子容器平分父容器的宽度（各占50%）。此时.logo-header-home里的justify-content:start其实已经生效——它让h2在自己的50%宽度容器内左对齐，但因为容器本身只占页面左半部分，再加上h2自带padding-left:20px，视觉上会和你预期的“整个头部居左”产生偏差。

最贴合头部布局需求的修改是利用父容器的flex属性直接实现左右分布，不需要给子容器强制分配一半宽度：

修改后的EncabezadoHome.css：

.container-header-home {
    display: flex;
    padding-top: 20px;
    justify-content: space-between; /* 让子元素分别靠左右两端 */
    width: 100%; /* 确保容器占满整个header宽度 */
}

.logo-header-home {
    display: flex;
    /* 移除flex:1，让容器宽度自适应内容 */
    padding-left: 20px; /* 把h2的padding移到容器上，布局更合理 */
}

.logo-header-home h2 {
    color: white;
    /* 移除padding-left */
}

.button-header-home {
    display: flex;
    /* 移除flex:1，让容器宽度自适应内容 */
    padding-right: 20px;
}

.button-header-home button {
    color: #ffffff;
    background-color: #1D9BF0;
    width: 200px;
    height: 50px;
    border-radius: 10px;
}

修改后效果：

• 父容器通过justify-content:space-between直接将logo容器和按钮容器推到页面左右两端
• 把h2的左侧内边距移到logo容器上，既保留了左侧间距，又让h2紧贴容器左侧
• 移除子容器的flex:1，避免不必要的宽度平分

如果一定要保留子容器的flex:1，只需移除h2的padding-left就能让它在左半容器内完全居左，但这种布局不符合头部导航的常规设计逻辑。

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