The slider I implementing is not align to middle, anyone know what's the appropriate coding is?
*FYI: I'm non-IT person
<div class="brands-slide">
<div id="brands-slider-demo-8" class="brands-slider owl-side-narrow" >
<div class="owl-carousel">
<div class="col-lg-4 col-md-4" style="text-align:center;">
<div style="width: 100%; text-align:center;">
<i class="porto-icon-shipping" style="font-size:37px;">
</i>
</div>
<div class="text-area" style="width: 100%; text-align:center;">
<h3>FREE SHIPPING</h3>
<p>Order more than RM36 & above!*</p>
</div>
</div>
<div class="col-lg-4 col-md-4" style="text-align:center;">
<div style="width: 100%; text-align:center;">
<i class="porto-icon-us-dollar" style="font-size:37px;">
</i>
</div>
<div class="text-area" style="width: 100%; text-align:center;">
<h3>MONEY BACK GUARANTEE</h3>
<p>100% money back guarantee!</p>
</div>
</div>
<div class="col-lg-4 col-md-4" style="text-align:center;">
<div style="width: 100%; text-align:center;">
<i class="porto-icon-support" style="font-size:37px;">
</i>
</div>
<div class="text-area" style="width: 100%; text-align:center;">
<h3>SHOP 24/7</h3>
<p>Our online store is open 24/7!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'owl.carousel/owl.carousel.min'
], function ($) {
$("#brands-slider-demo-8 .owl-carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
margin: 20,
nav: true,
navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],
dots: false,
loop: true,
responsive: {
0: {
items:2
},
640: {
items:3
},
}
});
});
</script>
</div>
</div>