CSS中header右侧padding不生效：原因及解决办法求助

常见原因 #

• 盒模型默认值导致宽度溢出：CSS默认盒模型为content-box，此时元素的width仅代表内容区域宽度。若给header设置了width: 100%，再添加左右padding，元素总宽度会变为100% + padding-left + padding-right，超出父容器宽度后，右侧padding会被挤出可视区域，看起来未生效。
• 父容器溢出隐藏：如果header的父元素设置了overflow: hidden，当header总宽度超过父容器时，右侧padding会被截断。
• 内部元素宽度覆盖padding：若header内的背景图或子元素设置了width: 100%，会填满header的内容区域，视觉上掩盖了右侧padding的存在。

解决办法 #

• 修改盒模型为border-box：给header添加box-sizing: border-box，让元素的width包含padding和border，总宽度不会超出设置值。代码示例：

header {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px; /* 左右padding可正常生效 */
}

• 调整父容器溢出属性：若父容器不需要隐藏溢出内容，直接移除overflow: hidden；若需保留该属性，需确保header总宽度（内容+padding）不超过父容器宽度。
• 修正内部元素宽度：给header内的背景图或子元素添加box-sizing: border-box，或用calc()计算宽度，让它们在padding范围内显示。示例：

header .bg-image {
  width: 100%;
  box-sizing: border-box;
}

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