Owl Carousel - width is calculated wrong

HTML

<script src="//www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="//www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="//www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<div id="promoted-carousel" class="owl-carousel">
    <div class="item">
        <img src="http://cdn2.tstatic.net/pekanbaru/foto/bank/images/ilustrasi-harimau_20160729_214055.jpg">
    </div>
        
    <div class="item">
        <img src="http://cdn2.tstatic.net/pekanbaru/foto/bank/images/ilustrasi-harimau_20160729_214055.jpg">
    </div>
        
    <div class="item">
        <img src="http://www.owlgraphic.com/owlcarousel/assets/img/demo-slides/controls.png">
    </div>
</div>

CSS

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

JavaScript

$('#promoted-carousel').owlCarousel({
    	        	         slideSpeed : 300,
	        	         paginationSpeed : 400,
	        	         center: true,
    navigation: true,
    singleItem: true
});