<nav id="sub" class="clearfix">
<div id="lefty"><</div>
<div class="container_element">
    <div class="inner_container">
    <a href="#"><div class="box">Estimate</div></a>
    <a href="#"><div class="box">About</div></a>
    <a href="#"><div class="box">Customer Information</div></a>
    <a href="#"><div class="box">Financing</div></a>
    <a href="#"><div class="box">Careers</div></a>
    <a href="#"><div class="box">Locate Us</div></a>
    <a href="#"><div class="box">Inspiration</div></a>
    </div>
</div>
<div id="righty">></div>
</nav>

$(function(){
    var state = 0;
    var maxState = 7;
    var winWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.container_element').width(winWidth-100);
        $('.container_element').scrollLeft((winWidth-100)*state);
    }).trigger('resize');
    $('#lefty').click(function(){
        if (state==0) {
           state = maxState;
        } else {
           state--;
        }
        $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800);
    });
    $('#righty').click(function(){
        if (state==maxState) {
           state = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800);
    });
});