Position Issue With Arrows on jQuery Slider (Slideshow)

Question

I'm using the code from this website: http://www.basic-slider.com/

The gallery works functionally, but the arrows for moving between slides are positioned in the lower left of the gallery instead of on the sides. I am unsure if I am missing any css, or I have extra in there. My includes for both js and css are accurate, so here's the in-page code.

<script>
$(function() {
    $('#gallery-slides').bjqs({
            'height' : 400,
            'width' : 900,
            'animation' : 'slide',
            'animationDuration' : 450,
            'centerMarkers' : true,
            'centerControls' :true,
            'nextText': '<img src="css/scroll/next.png">',
            'prevText': '<img src="css/scroll/prev.png">',
            'showMarkers': false,
            'keyboardNav' : true,
            'automatic' : false,
        });
});
</script>

<div id="gallery-slides" style="width:900px; height:400px;">
      <ul class="bjqs">
        <li>
        <!-- content here -->
        </li>
      </ul>
</div>

My website is: http://www.a-towndesigns.com/trs/#/content-gallery

Answer 1

if you float your li, it should help:

bjqs-controls li {
                 float:left;
                 }
bjqs-controls li:first-child {
                 float:right;
                 }