HTML/CSS开发问题：header头部背景无法覆盖页面顶部及侧边如何解决

问题原因 #

浏览器自带的默认样式会给<body>元素添加默认外边距（通常为8px），你仅给header设置了margin:0，但没有清除body的默认边距，所以会出现header和页面顶部、侧边存在空隙的问题。

解决方案 #

你可以任选以下一种方式修改你的style.css文件即可解决问题：

方案1：全局样式重置（更推荐，避免后续其他元素出现类似默认边距问题） #

在style.css文件的最顶部添加如下代码：

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

该代码会清除所有元素的默认内外边距，同时将盒模型设置为边框盒，后续设置元素宽高时会自动包含内边距和边框，开发更方便。

方案2：仅清除body的默认边距 #

如果你不想修改全局样式，单独给body设置边距清除即可：

body {
  margin: 0;
  padding: 0;
}

额外优化建议 #

你目前的.container类没有设置宽度限制，header内的logo和导航会直接贴在屏幕两侧，你可以给.container添加如下属性，让内部内容居中对齐，视觉效果更好：

.container {
  max-width: 1200px; /* 可根据你的设计需求调整宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 左右预留内边距，避免小屏幕下内容贴边 */
  font-family: 'Open Sans', sans-serif;
}

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