CSS简易网格布局问题：头部图片无法左对齐

问题根源 #

1. HTML结构错误：body标签被嵌套在.grid容器内部，违反HTML文档结构规范，会引发布局异常。
2. 全局flex样式干扰：.grid > *选择器给所有子元素设置了justify-content: center，导致header内部内容被强制居中，这是图片左侧出现间隙的核心原因。
3. header未配置正确flex布局：要实现图片左对齐、导航占剩余空间的需求，需要给header单独设置flex规则。

修正后的代码 #

HTML代码

<body>
    <div class="grid">
        <header>
            <img src="/images/placeholder_1.jpg">
            <nav>
                <ul class="nav">
                    <li>Blog</li>
                    <li>About Me</li>
                    <li>Publications</li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>Lorem Ipsem</h1>
        </main>
        <footer></footer>
    </div>
    <script src="index.js"></script>
</body>

CSS代码

.grid {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 50px 200px 100px;
    grid-gap: 1em;
}

header, footer {
    grid-column: 1 / 3; /* 简化写法，替代grid-column-start/end */
}

/* 移除全局justify-content:center，避免干扰header布局 */
.grid > * {
    background: white;
    display: flex;
    align-items: center;
}

/* 配置header的flex布局，让内部元素左对齐 */
header {
    justify-content: flex-start;
}

header img {
    width: 500px;
    height: 50px;
}

/* 让导航自动占据header剩余空间 */
header nav {
    margin-left: auto;
}

/* 可选：清除导航列表默认样式，优化布局 */
.nav {
    list-style: none;
    display: flex;
    gap: 1em;
    padding: 0;
    margin: 0;
}

关键说明 #

• 修正HTML结构后，确保文档符合标准，消除潜在布局冲突。
• 移除全局样式中的justify-content: center，给header单独设置justify-content: flex-start，实现图片左对齐。
• 通过margin-left: auto让导航自动填充header剩余空间，完成左右分布的布局效果。
• 可选清除导航列表的默认内边距、列表符号，让整体布局更整洁。

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