为何div在Chrome、Firefox中与屏幕边缘存间隙，Edge中却完美适配？

你的代码已重置html和body的边距与宽高，但.description-container缺少关键宽度设置，导致在Chrome和Firefox中无法自动铺满屏幕宽度，以下是修复方案：

修复后的CSS代码 #

.description-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(23, 64, 139);
    color: white;
    width: 100%; /* 强制容器占满父级宽度 */
    box-sizing: border-box; /* 确保内边距/边框不会超出宽度范围 */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

关键说明 #

• 添加width: 100%：虽然块级元素默认宽度为父级100%，但flex容器在部分场景下会随内容收缩，显式设置宽度可强制其铺满父级（body）宽度。
• 补充box-sizing: border-box：若后续为容器添加内边距或边框，该属性可避免元素宽度超出屏幕，保持布局一致性。

你也可以用min-width: 100vw替代width: 100%，vw单位直接基于视口宽度，能更直接确保容器铺满屏幕，但需注意：若页面存在横向滚动条，可能会导致容器宽度超出视口。

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