Owl Carousel card not centered

I am having trouble getting my owl carousel to be centered on my website. I have implemented the owl carousel to display testimonials from customers on my landing page. However, the carousel seems to be slightly off to the right and not straight with the testimonial title. I have tried various solutions, such as adjusting the width of the carousel, double checking the HTML for any errors, and even rewriting the JS, but none of these solutions seem to work. Can anyone help me figure out what's causing this issue and how to properly center the owl carousel on my website?

this is my code :

.owl-item.center .testimonial-card {
            transform: scale(0.8);
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
        }
        
        .testimonial-card {
            width: 500px;
            padding: 20px;
            display: flex;
            flex-direction: row;
            border-radius: 20px;
            background: white;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
            text-align: center;
            align-content: space-evenly;
            justify-content: center;
            transform: scale(0.5);
            transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
        }
        
        .testimonial-content {
            display: flex;
            flex-direction: column;
        }
        
        .testi-img {
            width: 100%;
            height: 100%;
            position: relative;
        }

.testi-title {
            background-color: #FFF;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
            text-align: center;
            border-radius: 40px;
            margin-top: 30px;
            padding: 30px;
            width: 40%;
            margin-inline: auto;
            font-weight: bold;
        }

  $(".owl-testimonials").owlCarousel({
        loop: true,
        item: 3,
        startPosition: 1,
        center: true,
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,

    });

<div class="testi-title"> Testimonial</div>
    <section class="owl-carousel owl-testimonials">
        <div class="testimonial-card">
            <img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>

        <div class="testimonial-card">

            <img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
        <div class="testimonial-card">

            <img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
    </section>

Solution

This issue was created because you decleared fixed width on .testimonial-card class. If you update the width:500px to 100% it will fix the issue. You can check the pen also to get the solution. https://codepen.io/salmanaabir/pen/vYawZYb

$( document ).ready(function() {
    $(".owl-testimonials").owlCarousel({
        loop: true,
        item: 3,
        startPosition: 1,
        center: true,
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,

    });
});

.owl-item.center .testimonial-card {
  transform: scale(0.8);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}

.testimonial-card {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;
  align-content: space-evenly;
  justify-content: center;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.testimonial-content {
  display: flex;
  flex-direction: column;
}

.testi-img {
  width: 100%;
  height: 100%;
  position: relative;
}

.testi-title {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  text-align: center;
  border-radius: 40px;
  margin-top: 30px;
  padding: 30px;
  width: 40%;
  margin-inline: auto;
  font-weight: bold;
}

<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' />
<div class="testi-title"> Testimonial</div>
    <section class="owl-carousel owl-testimonials">
        <div class="testimonial-card">
            <img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 1">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>

        <div class="testimonial-card">

            <img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 2">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
        <div class="testimonial-card">

            <img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 3">
            <div class="testimonial-content">
                <span class="date">1 days ago</span>
                <h4>Testimonial One</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
                </p>
            </div>
        </div>
    </section>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>