＆＃34;填充＆＃34;打破宽度的大小？

Question

我正在学习练习基本的响应式网站。

我有2个布局（在彼此之下）当我想添加一些上部布局（标题）的填充时，一切正常。填充打破了宽度的大小。页面看起来很丑陋。

请查看此代码。

以下是代码jsfiddle.net/01c6rtkm/1/请看一下。 （对不起，我刚尝试了带链接的每个标签，而Stackoverflow没有让我通过）

我需要在不调整宽度的情况下向#header添加一个大约10px的填充，并使宽度始终保持在100％甚至响应。