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

I often use 2 wrappers when working with Owl Carousel. I'd set all my styles per-slide for their height/width etc and the outer wrapper I'd set for the stage width etc.

I then call owl carousel on the inner wrapper and I usually have very few problems

<div id="promoted-carousel-outer">
    <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>
</div>