I want to to scroll my whole division to 1400px in a webpage but its not working

As you can see, this is the HTML code for my container. I want to scroll this part but it's not working.

// This is the javascript for the slider function

function slideRight() {
  var serviceCatalogue = document.getElementById('scroller');
  serviceCatalogue.scrollLeft = 1400
}

/* And this is the CSS for the conatiner. */

.conatiner {
  border: 1px solid black;
  width: 1000000000px;
  /* overflow: scroll; */
  height: 500px;
  overflow-x: scroll;
}

<div class="conatiner" id="scroller">
  <i style=" position:absolute; right: 50px; margin-top: 100px;" class="fas fa-arrow-right">
    </i>
  <button id="left-button" swipe left </button>
  <button id="right-button"> swipe right </button>
</div>