owl carousel is not showing correctly

Question

im trying to make owl carusel center demo that contains cards but when in i do that The shape of the owl carousel and the cards becomes distorted I want the result to be like this photo: the desired result

this is my code:

 <!--.....second owl carousel-->
                            <div class="second-owl">
                              <div class="owl-carousel owl-theme ">
                                <div class="item">
                                  <div class="card text-end" style="width:18rem;">
                                    <img src="./images/Rectangle 1909126608.png" class="card-img-top" alt="...">
                                    <div class="card-body">
                                      <span style="background-color: antiquewhite; border-radius: 18px; color: #bf9e66; padding-left:7px; padding-right: 7px;"> 05/26/2024</span>
                                      <p class="card-text" style="font-size: 17px; font-weight:500;">عمار النعيمي يطلق مشروع مسح دخل وانفاق الأسرة في إمارة عمان</p>
                                      <p class="card-text" style="font-size: 10px;">أدخل سمو الشيخ عمار النعيمي ولي عهد عجمان . رئيس المجلس التنفيذي مشروع مسح دخل انفاق الأسرة لإمارة عجمان الذي ينفذه مركز عجمان للإحصاء</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="item">
                                  <div class="card text-end" style="width:18rem;">
                                    <img src="./images/Rectangle 1909126608.png" class="card-img-top" alt="...">
                                    <div class="card-body">
                                      <span style="background-color: antiquewhite; border-radius: 18px; color: #bf9e66; padding-left:7px; padding-right: 7px;"> 05/26/2024</span>
                                      <p class="card-text" style="font-size: 17px; font-weight:500;">عمار النعيمي يطلق مشروع مسح دخل وانفاق الأسرة في إمارة عمان</p>
                                      <p class="card-text" style="font-size: 10px;">أدخل سمو الشيخ عمار النعيمي ولي عهد عجمان . رئيس المجلس التنفيذي مشروع مسح دخل انفاق الأسرة لإمارة عجمان الذي ينفذه مركز عجمان للإحصاء</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="item">
                                  <div class="card text-end" style="width:18rem;">
                                    <img src="./images/Rectangle 1909126608.png" class="card-img-top" alt="...">
                                    <div class="card-body">
                                      <span style="background-color: antiquewhite; border-radius: 18px; color: #bf9e66; padding-left:7px; padding-right: 7px;"> 05/26/2024</span>
                                      <p class="card-text" style="font-size: 17px; font-weight:500;">عمار النعيمي يطلق مشروع مسح دخل وانفاق الأسرة في إمارة عمان</p>
                                      <p class="card-text" style="font-size: 10px;">أدخل سمو الشيخ عمار النعيمي ولي عهد عجمان . رئيس المجلس التنفيذي مشروع مسح دخل انفاق الأسرة لإمارة عجمان الذي ينفذه مركز عجمان للإحصاء</p>
                                    </div>
                                  </div>
                                </div>
                            </div>
                          </div>

css code:

 .second-owl {
    width: 100%;
   height:auto;
}

.second-owl .owl-carousel .item {
    width: 100%; 
    padding: 20px; 
    display: flex;
    text-align: center;
    justify-content: center;
    
}

.card img {
    width: 100%; 
    height: auto; 
}

.card .card-body {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.card .card-body span {
    background-color: antiquewhite;
    border-radius: 5px;
    padding-left: 6px; 
    padding-right: 6px;
    color: #bf9e66;
}

.card .card-body .first-p {
    margin: 0;
    line-height: 1.5rem;
    font-weight: 700;
}

.card .card-body .second-p {
    line-height: 0.5rem;
    font-size: 6px;
}

I would be very grateful if someone could help me with this, thanks in advance