不需要的水平滚动，计算和宽度

Question

我的网站出现问题，导致大约1100px宽度的水平滚动。

网址：http://www.teamgenerous.com

麻烦的元素是.event类我确定，并且最有可能使用#section标签。但无论我怎么做，我都无法找到合适的解决方案。我想保持550px的宽度。

任何人都可以帮助我吗？

以下是一些相关的CSS部分（我认为）：

section {
-webkit-transform: translate3d(0,0,0);
background: #f7f7f6;
position: relative;
padding: 6em -webkit-calc(50% - 555px);
padding: 6em calc(50% - 555px);
}

.events {
width: 100%;
float: left;
margin-top: 7em;
}

.events figure {
margin: 0 1em 1em 0;
width: -webkit-calc((100% - 3em) / 4);
width: calc((100% - 3em) / 4);
float: left;
cursor: pointer;
text-align: center;
font-weight: 200;
 }

谢谢