title: Owl Carousel Auto Width with margin not working
body: <p>I have a fixed height on all my images and need to keep the image in proportion as the screen width gets smaller. </p>
  
  <pre><code>#owl-demo .item img {
    display: block;
    width: auto;
    height: 300px
  }
  </code></pre>
  
  <p>This works fine until I need to put a margin in between the images. </p>
  
  <pre><code>#owl-demo .item {
     margin:0 10px 0 10px;
  }
  </code></pre>
  
  <p>The margin won't show and the images are side by side still. The <code>margin</code> will show if I put <code>width: 100%</code> </p>
  
  <pre><code>#owl-demo .item img {
    display: block;
    width: 100%;
    height: 300px
  }
  </code></pre>
  
  <p>But then the image is no longer in proportion. </p>
  
  <p>I tried with Owl's own demo and this is the case. If you inspect one of the images and change it to the code at the top with <code>width: auto</code> you will see the margin no longer works. You will need to remove the <code>max-width: 100%</code> from the <code>img</code> tag from bootstrap also. </p>
  
  <p><a href="http://owlgraphic.com/owlcarousel/demos/images.html" rel="nofollow noreferrer">http://owlgraphic.com/owlcarousel/demos/images.html</a></p>
  
  <p><img src="https://i.stack.imgur.com/w7yc4.png" alt="enter image description here"></p>