Owl Carousel - width is calculated wrong

Question

I have three responsive items (imgs), but every time the Owl-Carousel is loaded, the owl-wrapper width is two times the size of all images together. For example; if the images fullsize takes 1583 px, the owl-wrapper takes 1583 * 3 * 2 = 9498px, and all site takes this width, instead the full size (1583 px).

The issue: http://nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel">
    <div class="item"><img src="assets/img/tmp/1.jpg"></div>
    <div class="item"><img src="assets/img/tmp/2.jpg"></div>
    <div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>

CSS

#promoted-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

JS

$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});

UPDATE

I saw that when I put #promoted-carousel div out of .page-wrapper div, it works properly. But my knowledge of css it is not sufficient to understand why it works.

Answer 1

it helped me:

setTimeout(function() {
    $('#promoted-carousel').owlCarousel({
        autoPlay: 5000,
        stopOnHover: true,
        singleItem: true
    });
}, 10);

Answer 2

this solution helped me too , if your theme is using bootstrape 4 and the owl plugin is using bootstrape 3 this will fix the owl width issue

 setTimeout(function() {
$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});
}, 10);