You have 2 problems here. The first problem is that you're not really scrolling (which you've mentioned), but moving the element, which makes you see empty spaces on the sides when 'scrolling' out of the images' actual visibility.
To that, the answer is simple. Instead of using jQuery's CSS solution, you need to use jQuery Animate to actually scroll within the div, like so:
$('#next_nav').click(function () {
$( "#nav" ).animate({
scrollLeft: '+=156px'
});
});
$('#prev_nav').click(function () {
$( "#nav" ).animate({
scrollLeft: '-=156px'
});
});
Now we get to the second problem - the fact that the div holding the images doesn't really have boundaries. You'll need to give the image wrapper a width that's smaller than the width you gave to the nav_container div, and then give it an overflow: none property so it doesn't show the rest of the images.
Then, when the div isn't moving around and when the only thing moving is the actual scroll within it, you can see how everything falls into place:
Hope this helps. :)