Съехал горизонтальный скролл с контентом и стрелочками в левую сторону. Как исправить?

document.addEventListener('DOMContentLoaded', () => {
  const contentWrapper = document.querySelector('.scroll-content-wrapper');
  const content = document.querySelector('.scroll-content');
  const items = document.querySelectorAll('.scroll-item');
  const arrowLeft = document.querySelector('.scroll-arrow-left');
  const arrowRight = document.querySelector('.scroll-arrow-right');
  const dots = document.querySelectorAll('.scroll-dot');
 
  let currentIndex = 0;
 
  arrowLeft.addEventListener('click', () => {
    if (currentIndex > 0) {
      currentIndex--;
      updateScrollPosition();
    }
  });
 
  arrowRight.addEventListener('click', () => {
    if (currentIndex < items.length - 1) {
      currentIndex++;
      updateScrollPosition();
    }
  });
 
  dots.forEach(dot => {
    dot.addEventListener('click', (e) => {
      currentIndex = parseInt(e.target.dataset.index);
      updateScrollPosition();
    });
  });
 
  contentWrapper.addEventListener('wheel', (e) => {
    e.preventDefault();
    if (e.deltaY > 0 && currentIndex < items.length - 1) {
      currentIndex++;
    } else if (e.deltaY < 0 && currentIndex > 0) {
      currentIndex--;
    }
    updateScrollPosition();
  });
 
  function updateScrollPosition() {
    const itemWidth = items[0].offsetWidth + 10; // Учитываем отступ
    content.style.transform = `translateX(-${itemWidth * currentIndex}px)`;
 
    dots.forEach(dot => dot.classList.remove('active'));
    dots[currentIndex].classList.add('active');
  }
 
  updateScrollPosition();
});