parallax banner无法使用overflow-x：hidden

Question

我的网站上有一个视差横幅，但在尝试使用

修复页面上的空白垂直空间后

body{
    overflow-x: hidden;
}

它停止运作...继承我的视差代码：

HTML

<div class="headerimg">
    <h2 class = "headertitle">
    <span class = "spacer"><p class= "headertext">HEADER</p></span>
    </h2>
</div>

CSS

.headerimg{
   position: relative;
   background:url('http://i.imgur.com/soTLu5u.jpg') fixed;
   background-size: cover;
   height:500px;
}


.headertitle{ 
   position: absolute; 
   top:50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);

}

.headertitle span.spacer{ 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(253,239,145,0.5);
   display: inline-block;
  /*--THIS MAKES THE TRANSPARENT BLOCK --*/ 
   padding: 50px;
 }

.headertext{
    font-size: 150px;

}

任何人都可以指出我做错了吗？