How do I centre an element using javascript on a horizontal scroll

See more:

ASP.NET

Javascript

CSS

I have 8 elements on a horizontal overflow scroll and _posNo is the element number i wish to center on the screen. However, I'm having problems due to different screen sizes. I found this JFiddle which does what I want: https://jsfiddle.net/nug4urna/ However, I've tried to adapt it to what I require as you can see below, but I can't work it out..

<div class="wrapper">
    <section id="myScrollbox" class="horizontal-scroll">    
        <div class="item" id="item1" runat="server">
            <asp:HyperLink ID="hyp1" runat="server" >
                <asp:Image ID="img1" width="300px" ImageUrl="~/files/images/car1.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <div class="item" id="item2" runat="server">
            <asp:HyperLink ID="hyp2" runat="server" >
                <asp:Image ID="img2" width="300px" ImageUrl="~/files/images/car2.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <div class="item" id="item3" runat="server">
            <asp:HyperLink ID="hyp3" runat="server" >
                <asp:Image ID="img3" width="300px" ImageUrl="~/files/images/car3.gif" runat="server" />
            </asp:HyperLink>
        </div> 
        <%-- ANOTHER 5 ITEMS SIMILAR TO ABOVE HERE --%>
    </section>
</div>

.wrapper {
    width: 100%;
    margin: auto;
    border: 1px solid #333;
    background-image:url(images/field.jpg);
    background-repeat:no-repeat;
 }
.horizontal-scroll {
    overflow: hidden;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0px 0;
    height:380px;
 }
.item {
    border: 0px solid #333;
    display: inline-block;
    width: 260px;
    text-align: center;
    padding: 20px 0px;
    font-size: 16px;
    margin-left: 50px;
    margin-bottom: 60px;
 }

What I have tried:

Here's what I tried in Javascript. I don't really know Javascript so I've tried to simply alter the code from the JFiddle example to fit the above..

function scrollDivIntoView(_posNo) {
  var _posNo = '<%= _posNo %>'; 
  var containerWidth = $('myScrollbox').width();

  var elOffset = 300 * _posNo;
  var elWidth = 300;
  var containerWidth = $('myScrollbox').width();
  var offset = elOffset - ((containerWidth - elWidth) / 2);      
  document.getElementById('myScrollbox').scrollLeft = offset;
}