CSS - What's causing this horizontal scrollbar? - html

Question

I am creating a site with some nested divs. The navigation bar has been creating an awful horizontal scrollbar. So far I've tried defining the widths of the divs with no luck. I also tried setting a max-width, but that didn't work either.
While I know I could hide the x-overflow, that just seems like a bandaid fix that could cause more problems later on.
Here's a picture of the pesky scrollbar/layout - http://i.imgur.com/i7V3pxf.png
When I inspect element in chrome, it seems that the life_link might be the issue, but I just can't find what's causing it. ):
HTML
<div id='nav'>
<div id='button_wrapper_r'>
<span class='navlink'>characters</span>
<span class='navlink'>guidebook</span>
<span class='navlink'>faq</span>
</div>
<div id='life_link'>LIFE</div>
<div id='button_wrapper_l'>
<span class='navlink'>modbox</span>
<span class='navlink'>packs</span>
<span class='navlink'>members</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;
}

Answer 1

#button_wrapper_l got the same width as your #nav. But then you moving it to the right by position: relative; left: 620px; and get invisible part of that getting through the right side of the #nav element, extending the width of the page.
UPD
I made a JSFiddle using another way to construct your menu – without any relative positions: https://jsfiddle.net/LpbLmmvv/
But there is small problem with width. It doesn't fit your 1027px.
You'd better use flex instead (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). But keep in mind it's browser support – http://caniuse.com/#search=flex