CSS练习布局问题：Section右侧边缘无法与Header、Footer正确对齐怎么办

问题根因 #

• 采用固定像素宽度设置容器，与body的百分比边距逻辑冲突：body设置了左右10%的边距，header作为块级元素会自适应父容器宽度，而nav、section、footer都是固定像素宽，当视口宽度变化时，固定宽度的容器自然无法和自适应宽度的header边缘对齐。
• 宽度计算存在偏差：当前nav宽度200px + nav右外边距20px + section宽度1300px = 1520px，而footer设置的宽度为1540px，三者总宽度本身就不一致。
• 浮动逻辑错误：footer不需要设置左浮动，应该清除浮动独占一行，避免和前面的nav、section排在同一行导致错位。

修复方案 #

将固定宽度改为自适应宽度计算即可，修改后的CSS核心代码如下：

/* 保留原有全局样式，修改以下部分即可 */
nav, section{
    padding: 300px 0px;
}
nav{
    width: 200px;
    margin-right: 20px;
}
section{
    /* 用calc计算宽度，减去nav的宽度和间距，填满剩余空间 */
    width: calc(100% - 220px);
}
header, footer{
    padding: 20px;
}
header{
    margin-bottom: 20px;
}
footer{
    margin-top: 20px;
    /* 清除浮动，宽度和header保持一致占满父容器 */
    clear: both;
    width: 100%;
}

如果需要兼容旧版不支持calc的浏览器，也可以给nav和section设置百分比宽度，比如nav设为15%，section设为calc(85% - 20px)即可。

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