响应式设计屏幕宽度超过960px

Question

我正在根据这篇文章创建一个响应式网站 link

但我为宽度超过980像素的屏幕添加了此代码

 /* for more than 980px */
@media screen and (min-width: 981px)

{
#pagewrap {
width: 94%; 
}

#content {
width: 20%;
}

#middle {
width: 50%;
}

#sidebar {
width: 20%;
}

}

你可以在codepen中看到结果 link

当我设置#middle的宽度为50％或49％时 并将浏览器宽度调整为990px​​附近的某些内容 第三内容区域位于另外两个区域的底部 但是当设置宽度为48％时，我的意思是现在3个区域彼此相邻

但现在又出现了另一个问题。 当浏览器大小接近1395像素（我的笔记本电脑） 在第三个内容区域和下面的包装边框之间有一个53px的差距（我不希望这个差距）

任何建议？