title: Owl Carousel - width is calculated wrong
body: <p>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).</p>
  
  <p>The issue:   <strike><a href="http://nacionalempreendimen.web2144.uni5.net" rel="nofollow">http://nacionalempreendimen.web2144.uni5.net</a></strike></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="promoted-carousel"&gt;
      &lt;div class="item"&gt;&lt;img src="assets/img/tmp/1.jpg"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="assets/img/tmp/2.jpg"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="assets/img/tmp/3.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#promoted-carousel .item img{
      display: block;
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#promoted-carousel').owlCarousel({
      autoPlay: 5000,
      stopOnHover: true,
      singleItem: true
  });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I saw that when I put <code>#promoted-carousel</code> div out of <code>.page-wrapper</code> div, it works properly. But my knowledge of css it is not sufficient to understand why it works.</p>