Carousel - Grid Spacing Issues (images getting crunched) - CSS - Using Unbounce (which lets you build websites)

Question

I'm having trouble getting this spacing down with my carousel. The difficult part is I'm using an in browser service, Unbounce to build the website (for a client) so this is an html/css snippet I have drop into the wysiwyg website framework. The spacing I am trying to achieve is where it goes across half the page horizontally. I also attempted using a more mobile friendly image (square image), but I still got the same result. Here is what it looks like:

Here is what it should look like (normal PNG image with no background):

Slider Element

  <div id="slider">

  <div class="testi-bx">
    <img src="" class="desk">
    <img src="" class="mob"> 
  </div>
  
  <div class="testi-bx">
    <img src="" class="desk">
    <img src="" class="mob">   
  </div>

   <div class="testi-bx">
     <img src="" class="desk">
     <img src="" class="mob"> 
  </div>
  
</div>

<script>
$('#slider').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    dots:false,
  arrows:true,
  cssEase: 'linear',
    pauseOnHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots:false
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows:false,
        dots:true,

      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows:false,
        dots:true,
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
    // 1024
  ]  

}); 
</script>

Slider Stylesheet

<style>
   
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    margin-top: 0px;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
  
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
     
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-dots {
  display: flex;
  justify-content: center;
  margin: 0px;
  padding: 0;
  list-style-type: none;
}
.slick-dots li {
  margin: 0 0.25rem;
}

.slick-dots li.slick-active button {
  background-color:#E21836;
}

.slick-dots button {
    background-color: #C0C0C0;
    border: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    color: transparent;
    /*border: 1px solid #E2714E;*/
    margin: 0 2px;
}
  
  .slick-prev.slick-arrow {
    background-image: url("");
    content: "";
    color: transparent;
    height: 16px !important;
    width: 9px !important;
    background-repeat: no-repeat;
    font-size: 42px;
    top: 35%;
    left: 0px;
    position: absolute;
    cursor: pointer;
    z-index: 555;
  }
  
  
    .slick-next.slick-arrow {
      background-image: url("");
      content: "";
      color: transparent;
      height: 16px !important;
      width: 9px !important;
      background-repeat: no-repeat;
      font-size: 42px;
      top: 35%;
      right: 0px;
      position: absolute;
      cursor: pointer;
      z-index: 556;
    }
  
  
  
/*.slick-prev::before {
    background-image: url("");
    content: "";
    color: transparent;
    height: 30px !important;
    width: 30px !important;
    background-repeat: no-repeat;
    font-size: 42px;
}
.slick-next::before {
    background-image: url("");
    content: "";
    color: transparent;
    height: 30px !important;
    width: 30px !important;
    background-repeat: no-repeat;
    font-size: 42px;
}*/

.slick-next, .slick-prev {
    width: 19px;
    height: 32px;
    font-size: 0px;
    border: none;
    background: none;
}

    
  .slick-slide img.desk {
    width: 890px;
    height: 100%;
    display: block;    
    margin: 0 auto;
    border-radius: 00px;
    

  }
  
  .slick-slide img.mob {
    width: 290px;
    height: 100%;
    display: none;
    margin: 0 auto;
    border-radius: 0px;
   
  }
  
  @media only screen and (max-width: 600px) {
   .slick-slide img.desk {

    display: none;
  }
  
  .slick-slide img.mob {

    display: block;
  }
    
    
    .slick-dots{margin-top: 25px;}
    
    .slick-prev.slick-arrow{bottom: 3.6em !important; left: 40% !important; top: auto;}
    .slick-next.slick-arrow{bottom: 3.6em !important; right: 40% !important; top: auto;}
    

}
  
</style>