Why does Slick not work correctly?

Question

css

<div class="client_comment">
      <div class="client_box">
        <div class="client_img">
          <img src="/img/avatar.png" alt="" class="avatar">
        </div>
          <p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>
          <div class="rang">
            <ul>
              
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
            </ul>
          </div>
          <div class="avtor">
            <span><b>Kita Say,</b> HK Director</span>
          </div>
      </div>
      <div class="client_box">
        <div class="client_img">
          <img src="/img/avatar.png" alt="" class="avatar">
        </div>
          <p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>			
          <div class="rang">
            <ul>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
            </ul>
          </div>
          <div class="avtor">
            <span><b>Al Rayhan,</b> UX Director</span>
          </div>
      </div>
      <div class="client_box">
        <div class="client_img">
          <img src="/img/avatar.png" alt="" class="avatar">
        </div>
          <p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>
                    <div class="rang">
            <ul>
              
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
              <li><i class="fas fa-star"></i></li>
            </ul>
          </div>
          <div class="avtor">
            <span><b>Kita Say,</b> HK Director</span>
          </div>
      </div>

    </div>

$(document).ready(function() {
 	$('.client_comment').slick({
    infinite: true,
    slidesToShow: 2,
    dots: false,
    prevArrow: '<div class="arrowleft"><i class="fas fa-angle-left"></i></div>',
  		nextArrow: '<div class="arrowleft"><i class="fas fa-angle-right"></i></div>',
    slidesToScroll: 1,
    autoplay: true,
  		autoplaySpeed: 2000,
    centerMode:1
  });
 });

.client_title{
  width: 100%;
  margin-top: 140px;
  display: -webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -ms-align-items: content;
  align-items: content;
  justify-content: center;
  text-align: center;
  
}
.client_title h3{
  font-size: 50px;
  line-height: 45px;
  font-weight: 400;
  padding: 10px;
}
.client_title span{
  color: #fc6744;
}
.client_title p{
  opacity: 0.5;
  padding: 10px;
}
.client_comment{
  margin: 80px 0 0 0;
  width: auto;
}
.client_box{
/*	max-width: 100%;*/
  height: 271px;
  box-shadow: 0 0 27px rgba(20, 20, 21, 0.09);
  border-radius: 1px;
  background-color: #ffffff;
  display: block;
  padding: 10px 15px;
  margin: 0px 20px;
  font-family: 'Source Sans Pro', sans-serif;

}
.slick-arrow{
/*	display: flex;*/
/*	position: absolute;*/
/*	top:50%;*/
/*	justify-content:center;*/
}
.avatar{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 rgba(20, 20, 21, 0.38);
  background-color: #ffffff;
  background-size: cover;
  z-index: 99;
  display: block;
}
.client_img{
  display: flex;
  justify-content: center;
  position: relative;
  bottom: 50px;
  z-index: 99;

  
}
.arrowleft{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 1px 3px 14px rgba(20, 20, 21, 0.08);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  transition: 300ms;

}
.arrowleft:hover,.arrowleft:focus{
  box-shadow: 1px 3px 14px rgba(20, 20, 21, 0.28);
  background-color: #ff6e47;
  color: #fff;
  transition: 300ms;
}
.client_box p::before { 
  content: "“";
  
}

.client_box p::after { 
  content: "”";

}
.client_box p{
  font-size: 17px;
  line-height: 27px;	
  opacity: 0.7;
  text-align: center;
  padding: 0px 50px;
  font-weight: 400;
}

Why are the left and right buttons not right, and the avatar is cut off, thanks for the time!

Answer 1

because

.client_img{
  bottom: 50px;
}

Corrected arrows:
https://codepen.io/UnluckySerivelha/pen/vavPzK