解决CSS盒子在小屏幕下贴靠页面右侧的问题

问题根源 #

你遇到的右侧贴边、左右间距不均问题，核心是CSS盒模型的默认计算逻辑：默认情况下，width仅指盒子的内容区宽度，border和padding会额外加到总宽度上。你的.bodybox设置了width:95%，再加上左右各5px的border、10px的padding，总宽度已经超过95%，再配合固定像素的margin-left:20px和margin-right:10px，小屏幕下总宽度会超出视口，导致右侧贴边。

修复方案 #

只需两步即可解决：

1. 启用box-sizing: border-box，让width包含border和padding，避免额外宽度撑开盒子；
2. 用margin: 20px auto替代固定左右margin，实现盒子水平居中，自动分配左右间距。

修改后的CSS代码：

.bodybox {
    text-align: center;
    background-color: #d19dfc;
    width: 95%;
    box-sizing: border-box; /* 关键：让width包含border和padding */
    border: 5px solid black;
    border-radius: 7px;
    padding: 10px;
    margin: 20px auto; /* 上下20px margin，左右自动居中 */
}

可选优化 #

如果希望盒子在大屏幕上不会过宽，可以添加max-width限制：

.bodybox {
    /* 其他属性不变 */
    max-width: 1200px; /* 限制盒子最大宽度，可根据需求调整数值 */
}

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