Owl Carousel 2 Responsive Width Issue

Question

I'm having a minor (but very annoying) issue with the Owl Carousel 2 slider.

Essentially, I want a single-item slider with a max-width of 824px, since it's the size of my images. The rest of the time, the slider is 95% of the width of its parent.

.owl-carousel {
  display: none;
  max-width: 824px;
  width: 95%;
  height: auto;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-refresh .owl-item {
  display: none;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

My problem is that if, due to my viewport size, the parent class of my slider resizes my items under 824px of width (the max-width I set previously for the main container), this happens:

EDIT 1: Made a quick codepen. To see the problem, view the page normally, then manually resize it (try a width of about 800px), then refresh.

As you can see, the next item is partially displayed on the right, like my active item just didn't feel like filling up its container at 100%. Weirdly enough, this only happens if the page loads with this viewport width; if I try to replicate the issue by manually resizing my browser window, everything looks a-ok and behaves as intended. If I try to "fix" it with padding (border on the images and padding in the items, to push them apart), then it's on the manual window resize that weird stuff happens--so it's not an option.

How do I get the items to fill the slider width at 100% in any viewport size?

EDIT 2: Someone suggested that it's very possibly a problem with the jQuery script intermittently working. I'm not fantastic at reading jQuery I haven't written, so could I get a second opinion on that?