CSS-是什么导致此水平滚动条的出现？

我正在创建一个带有一些嵌套div的网站。导航栏一直在创建可怕的水平滚动条。到目前为止，我已经尝试过定义div的宽度，但是没有运气。我也尝试设置了max-width，但是那也不起作用。

虽然我知道我可以隐藏x-overflow，但这似乎是一个临时的解决方案，以后可能会引起更多问题。

这是讨厌的滚动条/布局的图片-http: //i.imgur.com/i7V3pxf.png

当我检查chrome中的元素时，似乎life_link可能是问题所在，但我只是找不到导致它的原因。）：

的HTML

<div id='nav'>
    <div id='button_wrapper_r'>
        <span class='navlink'><a href="#">characters</a></span>
        <span class='navlink'><a href="#">guidebook</a></span>
        <span class='navlink'><a href="#">faq</a></span>
    </div>

    <div id='life_link'><a href="/index.php">LIFE</a></div>

    <div id='button_wrapper_l'>
        <span class='navlink'><a href="#">modbox</a></span>
        <span class='navlink'><a href="#">packs</a></span>
        <span class='navlink'><a href="#">members</a></span>
    </div>
</div>

的CSS

#nav {
background-image:url("/images/nav_bar.png");
width: 1027px;
height: 151px;
margin-top: 335px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
max-width: 1027px;
}

#nav a {
color: #bd916f;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Amaranth;
text-decoration: none;
font-size: 20px;
margin: 20px;
}

#nav a:hover {
color: #eff9ce;
}

#button_wrapper_r {
position: relative;
top: 54px;
left: 26px;
z-index: 3;
}

#button_wrapper_l {
position: relative;
top: -37px;
left: 620px;
z-index: 3;
}

#life_link {
position: relative;
top: 8px;
left: 460px;
z-index: 3;
}

#life_link a {
font-family: 'Cinzel Decorative', cursive;
font-size: 50px;
}

.navlink {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
 overflow: hidden;
 }
.navlink:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #9bd4bb;
 height: 2px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.navlink:hover:before, .navlink:focus:before, .navlink:active:before {
 left: 0;
 right: 0;
}