Adding space between items in an owl carousel

How do I add space between items in an owl carousel? I've tried using stagePadding but it adds space to the left of the first item. Margin does not work either. Can you help me?

HTML

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
  navigation : true
  });
});

#owl-demo .item{
  padding: 30px 0px;
  margin: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/dLymsYC7Kmo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/M46FRJsB0Qw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/6eEZ7DJMzuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nRYCLOTRAK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/eDEFolvLn0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nnVjsos40qk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/QqsvrV1_XEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/0nPlIi685DU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                    
</div>

Adding space between items in an owl carousel

2 Answers