Изображение Owl Carousel2, не отображающее полную ширину при использовании Stretch строки и содержимого, Stretch строки и содержимого (без отступов) в WordPress

Question

Я использую Wordpress с компоновщиком страниц WPBakery и совой Carousel2. Я должен отобразить слайдер на своей странице. Я должен отобразить изображение и текст. У меня есть 3 слайдера. Код отлично работает на локальном хосте без WordPress. Нет, я должен использовать этот код в WordPress. Я не использую плагин для слайдера. Я просто использовал текстовый блок и добавил свой код.

$("#owl-slider").owlCarousel({
  loop: true,
  navigation: false,
  pagination: true,
  nav: true,
  singleItem: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<div id="owl-slider" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide_img slider1 blue-overlay">
      <img src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="slide_img slider2 blue-overlay">
      <img src="http://www.freestockphotos.biz/pictures/12/12124/sunset.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="slide_img slider3 blue-overlay">
      <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg">
      <div class="slider-heading">
        <div class="w800 gptw-sectionHeading">
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Теперь ползунок работает на странице, но проблема в том, что мои изображения не отображаются от начала до конца. Я получаю вывод, как, два изображения отображаются.

Нет проблем с первыми двумя. Я получаю вопрос в 3rs и 4-й вариант. Если я выберу 3-е или 4-е, то получу два изображения. В идеале должно отображаться только одно изображение.

Настройка строки-> Растяжение строки-> ниже изображения

Мой ожидаемый результат -