background image doesnt fill page width

Question

I realize this is asked and answered in many ways, but after racking my brain, I can't figure out how to get it right. You can see that the background image doesnt fill the entire page (it stops shy by about 10px on both sides). Any advice?

fiddle

CSS:

body {
    font-size:16px;
    line-height:22px;
    height: auto;
    font-weight: 300;
    font-family:'Ubuntu', sans-serif;
    color:#122632;
    background-color:#afcbdc;
}
header {
    height: 57px;
    position: fixed;
    top: 0;
    left:0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    font-size:18px;
    line-height:14px;
    font-weight:300;
    z-index:99999;
    background-color: #ffffff;
}
#top-menu a:link {
    color: #122632;
    text-decoration:none;
}
.navWrapper {
    padding:0px 15px 0px 15px;
}
#top-menu {
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
}
#top-menu li {
    float: left;
    list-style-type: none;
}
#top-menu a {
    display: block;
    margin: 2px 14px 0px 14px;
    text-align: center;
    -webkit-transition: .5s all ease-out;
    -moz-transition: .5s all ease-out;
    transition: .5s all ease-out;
    color: #122632;
    text-decoration: none;
}
.bannerBkg {
    background-image:url("http://placehold.it/2000x610/333");
    background-position:top center;
    color: #ffffff;
    height: 610px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    z-index:999999;
    width:100%;
}
.bannerWrapper {
    width:94%;
    max-width:1200px;
    margin:0px auto;
}
#bannerRight {
    float:right;
    width:50%;
}
.bannerText {
    font-family:'Special Elite', cursive;
    font-weight: 400;
    font-size:85px;
    line-height:75px;
    color:#ffffff;
    text-align:right;
    width:46%;
    float:left;
    padding-top:155px;
    -webkit-text-stroke: 2px #132937;
}
.bannerTextSmall {
    font-weight: 300;
    font-family:'Ubuntu', sans-serif;
    color:#fff;
    font-size:30px;
    line-height:29px;
    padding-top:345px;
    text-align:right;
    -webkit-text-stroke: 1px #132937;
}
#tentaclesHeader {
    position:absolute;
    float:left;
    left:50%;
    top:0px;
    z-index:99;
    background-image:url("http://lorempixel.com/570/690/sports/");
    background-repeat:no-repeat;
    background-position:top left;
    width:570px;
    height:690px;
}

HTML:

<header class="nav-down">
    <div class="navWrapper">
        <div class="navbar">
            <ul id="top-menu">
                <li class="active"> <a href="#home">home</a>

                </li>
                <li>    <a href="#about">about</a>

                </li>
                <li>    <a href="#work">work</a>

                </li>
                <li>    <a href="#store">contact</a>

                </li>
                <li>    <a href="#resume" target="_blank">resume</a>

                </li>
            </ul>
        </div>
    </div>
</header>
<div class="bannerBkg">
    <div class="bannerWrapper">
        <div class="bannerText">test
            <br>copy
            <br> <span class="bannerTextSmall">blah blah blah</span>

        </div>
        <div id="tentaclesHeader"></div>
        <div id="bannerRight"></div>
        <div class="space"></div>
    </div>
</div>

Answer 1

add a margin:0; to your body tag css. body on most browsers has a default value of up to around 10px on the margins

body {
  font-size: 16px;
  line-height: 22px;
  height: auto;
  font-weight: 300;
  font-family: 'Ubuntu', sans-serif;
  color: #122632;
  background-color: #afcbdc;
  margin: 0;
}