CSS Padding导致右对齐导航按钮被挤出页面的问题求助

问题核心：给设置了position: fixed和width: 100%的元素添加内边距时，默认盒模型会将内边距计算在宽度之外，导致元素总宽度超过视口宽度，右侧按钮因此被挤出页面。

以下是两种高效解决方式：

方法1：使用border-box盒模型 #

为#header添加box-sizing: border-box，让内边距包含在设定的宽度范围内：

body, html {
    margin: 0;
    background-color: #000000;
}
#header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 30px;
    position: fixed;
    background-color: rgba(10, 98, 160, .5);
    width: 100%;
    border-bottom: 1px solid #808080;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px; /* 建议添加右内边距，避免按钮贴靠边缘 */
    box-sizing: border-box; /* 关键修复属性 */
}

方法2：通过left/right定位替代width:100% #

移除width:100%，改用left: 0和right: 0让元素自动占满视口宽度，内边距不会造成宽度溢出：

body, html {
    margin: 0;
    background-color: #000000;
}
#header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 30px;
    position: fixed;
    background-color: rgba(10, 98, 160, .5);
    left: 0;
    right: 0;
    border-bottom: 1px solid #808080;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px; /* 优化视觉体验的右内边距 */
}

HTML代码保持不变：

<div id="header">
    <img src="titanium_tsp.png" height="100%">
    <button>Download</button>
</div>

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