Как центрировать элемент с помощью javascript на горизонтальной прокрутке

---

У меня есть 8 элементов на горизонтальной прокрутке переполнения, и _posNo-это номер элемента, который я хочу центрировать на экране. Однако у меня возникли проблемы из-за разных размеров экрана. Я нашел этот JFiddle, который делает то, что я хочу: https://jsfiddle.net/nug4urna однако я попытался адаптировать его к тому, что мне требуется, как вы можете видеть ниже, но я не могу этого сделать..

<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;
 }

Что я уже пробовал:

Вот что я попробовал в Javascript. Я действительно не знаю Javascript, поэтому я попытался просто изменить код из примера JFiddle, чтобы он соответствовал приведенному выше..

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;
}

---