Carousel padding on first item

Question

I'm working with owl carousel using stage padding.

I'm using the carousel with loop:false. 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.

So at page load it should be like this:

And on slide:

Using stage-padding gives padding both left and right. Giving space on first item as shown in my test.

The problem is that if I remove the padding-left (to get the first item attached on left without margin) I get this result on slide:

Any idea how can I solve this?

This is my markup:

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    stagePadding: 40,
    loop:false,
    margin:2,
    nav:false,
    items:2
})

Answer 1

Its from inline style, try to find this line and remove padding-left like this:

<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); 
transition: all 0s ease 0s; width: 11132px; 
padding-left: 0px; padding-right: 40px;">.. </div>

Answer 2

Add This css it will be work fine..

.owl-stage{padding-left:0px !important;}