页面右侧padding与margin失效问题求助（附相关代码）

问题根源 #

1. header设置了width:100vw，同时添加了padding:10px，CSS中width属性默认不包含padding，导致header实际宽度为100vw + 20px（左右各10px padding），超出视口范围。
2. 全局选择器*的overflow-x:hidden会直接隐藏超出视口的部分，所以右侧的padding看起来没有效果。
3. 子元素.logo-name-logo的width:100%加上margin:10px，进一步超出了header的可用宽度，加剧了内容被隐藏的问题。

修改后的代码 #

CSS部分

* {
  padding: 0;
  margin: 0;
  /* 移除全局横向溢出隐藏，避免正常内容被截断 */
  /* overflow-x: hidden; */
}

header {
  /* 块级元素默认占满父容器宽度，无需设置100vw */
  /* width: 100vw; */
  background-color: brown;
  padding: 10px;
}

.logo-name-logo {
  background-color: white;
  display: flex;
  /* 用max-width替代width，防止margin导致宽度溢出 */
  max-width: 100%;
  margin: 10px;
  /* 小屏幕下自动换行，避免三个200px的元素挤在一起 */
  flex-wrap: wrap;
  /* 用gap控制flex子元素间距，比margin更直观 */
  gap: 10px;
}

.flexitem {
  border: 3px solid yellow;
  background-color: aquamarine;
  width: 200px;
}

.logo-1, .name, .logo-2 {
  min-height: 100px;
}

HTML部分（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meshal</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <div class="logo-name-logo">
      <div class="flexitem logo-1"></div>
      <div class="flexitem name"></div>
      <div class="flexitem logo-2"></div>
    </div>
    <div class="job-title"></div>
  </header>
</body>

</html>

关键修改说明 #

• 删除全局的overflow-x:hidden：这个属性会强制隐藏横向超出的内容，包括你想要的右侧padding，除非有特殊需求，不要全局设置。
• 移除header的width:100vw：块级元素默认会自动填满父容器宽度，手动设置100vw会让padding额外增加宽度，导致溢出。
• 将.logo-name-logo的width:100%改为max-width:100%：确保元素加上margin后不会超出父容器的可用空间。
• 添加flex-wrap:wrap和gap：优化小屏幕显示效果，让子元素自动换行，同时用gap统一控制间距，避免margin带来的布局问题。

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