title: Carousel padding on first item
body: <p>I'm working with <a href="http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html" rel="nofollow noreferrer">owl carousel using stage padding</a>.</p>
  <p>I'm using the carousel with <code>loop:false</code>. I'm trying to get the first item to be without padding on left and that after slide it keeps the same padding for both items on left and right.</p>
  <p>So at page load it should be like this:
  <img src="https://i.stack.imgur.com/uHowY.png" alt="enter image description here" /></p>
  <p>And on slide:
  <img src="https://i.stack.imgur.com/XqCnf.png" alt="enter image description here" /></p>
  <p>Using stage-padding gives padding both left and right. Giving space on first item as shown in my <a href="http://pixelbypixel.comli.com/owl/" rel="nofollow noreferrer">test</a>.</p>
  <p>The problem is that if I remove the <code>padding-left</code> (to get the first item attached on left without margin) I get this result on slide:
  <img src="https://i.stack.imgur.com/NwDjt.png" alt="enter image description here" /></p>
  <p>Any idea how can I solve this?</p>
  <p>This is my markup:</p>
  <pre><code>&lt;div class=&quot;owl-carousel&quot;&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;1&lt;/h4&gt;&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;2&lt;/h4&gt;&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;3&lt;/h4&gt;&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;4&lt;/h4&gt;&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;5&lt;/h4&gt;&lt;/div&gt;
      &lt;div class=&quot;item&quot;&gt;&lt;h4&gt;6&lt;/h4&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  $('.owl-carousel').owlCarousel({
      stagePadding: 40,
      loop:false,
      margin:2,
      nav:false,
      items:2
  })
  </code></pre>