ScrollView on web multiple pages showing

Hello,

I'm using a kendo scrollview for a web application with a local datasource populated by a call to a controller.  The data retrieval and feeding seems to be working properly and there is no issue there.

The issue I am having is making the scroll view look good.  It seems that when the scroll view renders that it renders all the pages and the width of my page becomes elongated.  If you scroll you see the other pages and their items.

We are trying to show users the latest creative they are able to order.  It will usually consist of at least 2 pages.

I tried to follow the demo as best as I could but I think the scrollview behaves different with a local datasource.  My markup is below as well as with the template.

$("#scrollview").kendoMobileScrollView({
                dataSource: creatives,
                itemsPerPage:4,
                contentHeight: "150px",
                //contentWidth: "400px",
                enablePager: false,
                template: kendo.template($("#template").html())
            });

            $("#prev-img").click(function (e) {
                var scrollView = $("#scrollview").data("kendoMobileScrollView");
                scrollView.prev();
            });

            $("#next-img").click(function (e) {
                var scrollView = $("#scrollview").data("kendoMobileScrollView");
                scrollView.next();
            });

***TEMPLATE***
<script id="template" type="text/x-kendo-template">

        @*<div data-role="page">*@
            #for (var i = 0; i < data.length; i++) { #
            <div style="float: left; display: table; border: solid; border-width: 1px; border-color: gray; margin: 2px; text-transform: uppercase;">
                <div style="padding:2px">
                    <a class="thumb thumbshow">
                        <img src="#= data[i].ImagePath #" style="width:150px;height:194px" alt="" onerror="this.src='@Url.Content("~/Content/images/No_Image_Available.png")'">

                    </a>
                </div>
                <div style="display:table-cell;vertical-align:top;padding-left:5px;height:215px; width:110px;padding-right:5px;position:relative">
                    <div style="font-weight:bold; margin-bottom:10px;margin-top:5px;">
                         #= data[i].Description#
                    </div>
                    <div style=" display: inline-block; overflow-y: hidden;  width:110px">
                        <div style=" display: inline-block; height: 215px; width:139px">
                            <div class="CreativeInventory" style="display: inline-block; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; padding-right: 7px; margin-bottom: 4px; text-transform: none; ">
                                # for(var j=0; j < data[i].CreativeList.length; j++){ #
                                <p>&bull; #= data[i].CreativeList[j].Media #</p>
                                # } #

                                @*#= data[i].CreativeList[0].LongDescription #*@
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            #}#
        @*</div>*@
    </script>

I will also attach 2 images showing how the scrollview renders - mainview shows the first page of the scroll view and notice the window scroll bar at the bottom.  scrolledview shows the other pages which seem to be rendered far right of what should be the main viewing area.  The positioning of each of the items is weird too not sure if that is because of our styling or if it is related to my scrollview issues.

We ideally want to show 4 to 5 items per page next to each other and same sized boxes.

Thanks for your help.