Issue with page scrolling horizontally - php

Question

I'm having an issue with this page http://goo.gl/Vdu4Q0 having extra space on the x axis and have no clue why. I searched this forum for answers as well, but didn't find anything that applied, so I apologize if something is out there that I overlooked. I rechecked my HTML structure to see if there were any unclosed divs, but I'm not seeing anything. Does anyone have any ideas? Here's the Wordpress structure:
HEADER
<header class="full left header-bg">
<div class="container">
<div class="container-inside left">
<div class="sixteen columns">
<h1 class="logo abs">
<a href="<?php echo get_option('home'); ?>"/>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/logo.png"/></a>
</a>
</h1>
<nav>
<?php st_navbar(); ?>
</nav>
</div>
</div>
</div><!--container-->
</header>
>
LOOP PAGE
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if (!is_page_template('onecolumn-page.php')) { ?>
<?php if (is_front_page() && !get_post_meta($post->ID, 'hidetitle', true)) { ?>
<div class="full left secondary-bg">
<div class="container">
<div class="sixteen columns">
<div class="eight columns offset-by-four">
<div class="hp-text-bg">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<div class="full left home-posts-bg">
<div class="container">
<div class="sixteen columns">
<div class="five columns post-bg alpha">
<div class="post-bg-wrapper">
<h2>TATTOO OF THE WEEK</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/tow-img.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
<div class="six columns post-bg">
<div class="post-bg-wrapper">
<h2>JEWELRY</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/jewelry.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
<div class="five columns post-bg omega">
<div class="post-bg-wrapper">
<h2>AFTERCARE</h2>
<p class="p-description-blue"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/aftercare.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
</div>
</div><!--container-->
</div>
<?php } elseif (!get_post_meta($post->ID, 'hidetitle', true)) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } else {
echo '<br />';
} ?>
<?php } ?>
<div class="full left">
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'skeleton' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'skeleton' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
FOOTER
<!-- start of footer -->
<footer>
<div class="full left pre-footer-bg">
<div class="container ">
<div class="sixteen columns">
<div class="five columns alpha">
<h5>CONNECT</h5>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-fb.png"/>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-mail.png"/>
</div>
<div class="six columns">
<h5>CALL</h5>
<p>303.830.7272<br />
303.832.8282</p>
</div>
<div class="five columns omega">
<h5>GET TO US</h5>
<p>1332 East Colfax Ave<br />
Denver, CO 80218 | Map
</p>
</div>
</div>
</div><!--container-->
</div>
<div class="full left bottom-footer-bg">
<div class="container">
<div class="sixteen columns">
<p class="bottom-footer-text">© <?php echo date('Y'); ?> Bound By Design Tattoo | Site by brentthelendesign</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/plugins.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/nav.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/script.js"></script>
<?php wp_footer();?>
</body>

Answer 1

in style.css please add this css you are using 100% width and also applying padding that y its happening
.bottom-footer-bg,.home-posts-bg,.secondary-bg{
width:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

Answer 2

If you're able to use css3, you can use box-sizing on your footer. You have a width of 100% set and a padding on top of that. Try:
.full {
box-sizing: border-box;
}