title: Full Width - Owl Carousel 2 issue
body: <p>Attempting to create a full-width owl-carousel but I keep seeing this on <strong><em>.owl-stage</em></strong> when I <em>inspect-element</em> on chrome:</p>
  
  <pre><code>element.style {
      transform: translate3d(-1872px, 0px, 0px);
      transition: 0s;
      width: 7264px;
      padding-left: 200px;
      padding-right: 200px;
  }
  </code></pre>
  
  <hr>
  
  <p>Initially I tried to just overwrite padding on <strong><em>.owl-stage</em></strong>, but the padding stayed the same. </p>
  
  <p>I also tried setting min-width for all images to 100% and 100vw, but that hasn't worked either.</p>
  
  <p>Is there anyway to adjust the padding on <strong><em>.owl-stage</em></strong>?</p>
  
  <hr>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.owl-carousel').owlCarousel({
      stagePadding: 200,
      loop:true,
      margin:0,
      singleItem:true,
      nav:true,
      navText: [
          "&lt;i class='fa fa-caret-left'&gt;&lt;/i&gt;",
          "&lt;i class='fa fa-caret-right'&gt;&lt;/i&gt;"
      ],
      dots:true,
      // autoplay: true,
      // autoplayHoverPause: true,
      responsive:{
          0:{
              items:1,
              stagePadding: 60
          },
          600:{
              items:1,
              stagePadding: 100
          },
          1000:{
              items:1,
              stagePadding: 200
          },
          1200:{
              items:1,
              stagePadding: 250
          },
          1400:{
              items:1,
              stagePadding: 300
          },
          1600:{
              items:1,
              stagePadding: 350
          },
          1800:{
              items:1,
              stagePadding: 400
          }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 0;
    margin: 80px 0 0 0;
    font-family: Merriweather;
  }
  
  .owl-carousel:after {
    content: "";
    display: block;
    position: absolute;
    width: 8%;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: 0;
    pointer-events: none;
    background: url() no-repeat center 50%;
    background-size: 100% auto;
  }
  .owl-stage{
    min-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .owl-item {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0) scale(1.0, 1.0);
  }
  .item {
    opacity: 0.4;
    transition: .4s ease all;
    transform: scale(.6);
  }
  .item img{
    display: block;
    min-width: 100%;
    width: auto;
    height: auto;
    max-height: 680px !important;
  }
  .active .item {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transform: scale(1);
    max-height: 680px !important;
  }
  
  /* content and cta */
  .inner {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
  }
  /* END CTA Button*/
  
  /* Title Animation */
  .reveal-text,
  .reveal-text:after {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  .reveal-text {
    position: relative;
    -webkit-user-select: none;
            user-select: none;
    color:#ffe221;
    text-shadow: 1px 1px #000000;
    white-space: nowrap;
  }
  .reveal-text:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8ce2ea;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    pointer-events: none;
  }
  .active .reveal-text{
      -webkit-animation-name: reveal-text;
            animation-name: reveal-text;
  }
  .active .reveal-text:after {
      -webkit-animation-name: revealer-text;
            animation-name: revealer-text;
  }
  /* Before animation */
  @-webkit-keyframes reveal-text {
    from {
      -webkit-clip-path: inset(0 100% 0 0);
              clip-path: inset(0 100% 0 0);
    }
    to {
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0);
    }
  }
  @keyframes reveal-text {
    from {
      -webkit-clip-path: inset(0 100% 0 0);
              clip-path: inset(0 100% 0 0);
    }
    to {
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0);
    }
  }
  
  /* After animation */
  @-webkit-keyframes revealer-text {
    0%, 50% {
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
    }
    60%, 100% {
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    50% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    60% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    100% {
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
    }
  }
  @keyframes revealer-text {
    0%, 50% {
      -webkit-transform-origin: 0 50%;
              transform-origin: 0 50%;
    }
    60%, 100% {
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
    }
    50% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    60% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    100% {
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
    }
  }
  /* Title Animation END */
  
  /* OWL-Carousel Navigation*/
  .owl-nav div {
    position: absolute;
    top: 45%;
    color: #cdcbcd;
  }
  .owl-nav i {
    font-size: 52px;
  }
  .owl-nav .owl-prev {
    left: 5% !important;
  }
  .owl-nav .owl-next {
    right: 5% !important;;
  }
  .owl-prev:hover, .owl-next:hover{
    text-shadow: 2px 2px #000000;
    transform: translateX(10%);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  .owl-prev:hover{
    text-shadow: -2px 2px #000000;
    transform: translateX(-10%);
  }
  .owl-theme .owl-dots .owl-dot span{
    width: 0;
  }
  .owl-dots {
    text-align: center;
    position: fixed;
    margin-top: 10px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .owl-dot {
    border-radius: 50px;
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(127,127,127, 0.5);
    margin-left: 5px;
    margin-right: 5px;
  }
  .owl-dot.active {
    background: rgba(127,127,127, 1);
  }
  /* END OWL-Carousel Navigation*/
  
  @media only screen and (max-width:768px) {
    #full-width{
      padding: 0;
    }
    .item{
      transform: scale(0);
    }
    .item img{
      height: 400px !important;
    }
    .active .item img{
      max-height: 400px;
    }
  }
  @media only screen and (max-width:420px) {
    .item img{
      height: 200px !important;
    }
    .active .item img{
      max-height: 200px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang=""&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;Tanya-UI-Kit-3 Full Page Width&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/&gt;
    &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="owl-carousel owl-theme owl-loaded owl-drag"&gt;
    &lt;div class="item"&gt;
    &lt;img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" /&gt;
    &lt;div class="inner"&gt;
        &lt;div class="row row-content"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;div class="headline-wrap"&gt;
                    &lt;h1&gt;&lt;span class="reveal-text"&gt;H1 TITLE&lt;/span&gt;&lt;/h1&gt;
                    &lt;h2&gt;&lt;span class="reveal-text"&gt;H2 TITLE&lt;/span&gt;&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row row-cta"&gt;
            &lt;div class="col-md-12 cta-wrap"&gt;
                &lt;a class="cta-main"&gt;&lt;span class="cta-text reveal-text"&gt;CTA-MAIN&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
    &lt;img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&amp;mh=1080&amp;q=70" alt="" /&gt;
    &lt;div class="inner"&gt;
        &lt;div class="row row-content"&gt;
            &lt;div class="col-md-12"&gt;
                    &lt;div class="headline-wrap"&gt;
                    &lt;h1&gt;&lt;span class="reveal-text"&gt;H1 TITLE&lt;/span&gt;&lt;/h1&gt;
                    &lt;h2&gt;&lt;span class="reveal-text"&gt;H2 TITLE&lt;/span&gt;&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row row-cta"&gt;
            &lt;div class="col-md-12 cta-wrap js-cta-wrap"&gt;
                &lt;a class="cta-main"&gt;&lt;span class="cta-text reveal-text"&gt;CTA-MAIN&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;!-- scripts --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>