为什么给section设置background-color后元素左右会出现空白？

你的问题是浏览器默认样式导致的：
绝大多数现代浏览器都会给<body>元素默认添加8px的上下左右外边距，你的section作为body的直接子元素，就算自身margin设为0，也会被body的默认外边距撑开左右的空白区域。你可以对比下固定定位的header是满宽的，就是因为fixed定位是相对于视口生效的，不受body的外边距影响，也能佐证问题根源。

你提到的用额外padding解决不是正确做法，会打乱后续布局逻辑，直接重置body的默认外边距即可，在你的CSS中添加如下代码：

body {
  margin: 0;
}

如果想避免其他元素默认样式带来的干扰，也可以在CSS开头加全局样式重置，一劳永逸解决同类问题：

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

另外顺便提一个你代码里的不规范问题：你当前的HTML结构不符合标准，<link>样式引入标签应该放在<head>标签内，<header>元素属于页面内容应该放在<body>标签内，现在的写法浏览器虽然会自动容错，但后续容易引发其他未知的样式或交互问题，建议调整结构。

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