Swiper JS Slides not Sliding all the way the left

I'm having a little trouble with my Swiper JS slider. I would like the slides to start at the left and slide all the way to the left on each click. Right now the last slide just comes into view but doesn't end at the left of the container. Anyone know if that's possible and what settings I would use to achieve that?

I have tried setting loop:true but this centres my first slide and displays a partial at the left that I don't want at the beginning.

My JS:

const swiper = new Swiper('.swiper-container', {

  initialSlide: 0,
  slidesPerView: 1.8,
  centeredSlides: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

My CSS

 .swiper-container {
                        width: 100%;
                        height: 100%;
                        min-height: 500px;
                      }

                      .swiper-slide {
                        text-align: center;
                        font-size: 18px;

                        /* Center slide text vertically */
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                      }

                      .swiper-slide img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                      }

                      .swiper-slide {
                        width: 40%;
                        flex-shrink: 0;
                        /*padding-right: 10%;*/
                      }

                      .swiper-slide article {
                        border: solid 1px red;
                        width: 100%;
                        height: 100%;
                        margin-right: 10%;
                      }

I am more or less trying to achieve the same effect as the first slider on this site:https://iti.ca/en/

Slider in Start Position:

Slider after clicking navigation arrow. (there are only two slides but slide 2 does not move to the far left)

Thank you!