如何填充header与navigation之间的空白区域？HTML/CSS新手求助

你的代码里，header和nav之间出现空白的核心原因是包裹它们的.containers容器使用了justify-content: space-between属性——这个属性会让flex容器内的子元素分别靠向容器的左右两端，自然就在中间留出了空白。结合你的需求，给你几个直接的解决方法：

方法一：调整Flex容器的对齐方式 #

把.containers的justify-content属性从space-between改成flex-start（元素靠左紧密排列）或者center（整体居中，元素间无空白）：

.containers {
  display: flex;
  justify-content: flex-start; /* 替换成 center 也可 */
  align-items: center;
}

方法二：让Header和Nav紧密占满容器 #

如果想让header固定宽度，nav占满剩余空间且两者无空白，可以去掉justify-content，给header设置固定宽度，同时给nav添加flex: 1：

.containers {
  display: flex;
  align-items: center;
}
header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  width: 220px; /* 自定义header宽度 */
}
nav {
  display: flex;
  justify-content: center;
  background-color: #444;
  overflow-x: auto;
  flex: 1; /* 让nav占满剩余空间 */
}

额外建议：全局样式重置 #

作为新手，建议添加全局样式重置，避免浏览器默认的边距干扰布局：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

修改后的完整代码示例 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
header h4 {
  margin: 0;
}
nav {
  display: flex;
  justify-content: center;
  background-color: #444;
  overflow-x: auto;
}
nav a {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}
nav a:hover {
  background-color: #555;
}
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}
.containers {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

HTML

<body>
  <div class="containers">
    <header>
      <h4>Infrastructural Company</h4>
    </header>
    <nav>
      <a href="#home" onclick="showTab('home')">Home</a>
      <a href="#services" onclick="showTab('services')">Services</a>
      <a href="#projects" onclick="showTab('projects')">Projects</a>
      <a href="#contact" onclick="showTab('contact')">Contact</a>
    </nav>
  </div>
</body>

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