title: How to fit carousel within parent div?
body: <p>I'm pulling my hair out because this should be really simple</p>
  
  <p>I have a parent class .wrapper with a display of flex</p>
  
  <p>Inside that is a .carousel div with 100% width and a .info div with width of 500px</p>
  
  <p>Inside of the .carousel class is a container class container the carousel slider. I would expect that when the width is set to 100% it would stay within the parameters of the .carousel class but it is overflowing outside this class and i can't figure out why </p>
  
  <p>Can anyone explain why this is happening?</p>
  
  <p>It also is showing part of the next image in the slider which it should be</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>$(window).on('load', function() {
    $('.carousel-main').owlCarousel({
      items: 1,
      loop: true,
      autoplay: false,
      autoplayTimeout: 3000,
      nav: true,
      navText: [""],
      dots: false
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *:before,
  *:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    width: 100%;
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img {
    width: 100%;
  }
  
  .wrapper {
    display: flex;
    width: 100%;
  }
  
  .carousel {
    width: 100%;
  }
  
  .info {
    width: 500px;
    border-left: #000 1px solid;
    height: 100vh;
    padding: 1rem;
  }
  
  h1 {
    text-transform: uppercase;
    font-size: 1rem;
  }
  
  .container {
    width: 100%;
  }
  
  .owl-carousel {
    overflow: hidden;
    padding: 2rem;
  }
  
  .carousel-main {
    position: relative;
  }
  
  
  /* Nav */
  
  .owl-carousel .owl-nav {
    margin-top: 0;
    /* resetting margins for nav buttons */
  }
  
  .owl-carousel .owl-nav button.owl-prev {
    width: 50%;
    height: 100%;
    margin: 0;
    /* removes margins around nav buttons */
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    cursor: w-resize;
  }
  
  .owl-carousel .owl-nav button.owl-next {
    width: 50%;
    height: 100%;
    margin: 0;
    /* removes margins around nav buttons */
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    cursor: e-resize;
  }
  
  .owl-carousel .owl-nav button.owl-prev:hover,
  .owl-carousel .owl-nav button.owl-next:hover {
    color: transparent;
    background: transparent;
  }
  
  .owl-nav button.owl-prev {
    left: 0px;
    starting position;
  }
  
  .owl-nav button.owl-next {
    right: 0px;
    starting position;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- CSS --&gt;
  &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"&gt;
  
  
  &lt;div class="wrapper"&gt;
    &lt;div class="carousel"&gt;
      &lt;div class="container"&gt;
        &lt;div class="owl-carousel owl-theme carousel-main"&gt;
          &lt;div&gt;
            &lt;img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&amp;hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&amp;width=300"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Carousel --&gt;
  
    &lt;div class="info"&gt;
      &lt;h1&gt;Contact&lt;/h1&gt;
      &lt;a herf="mailTo:hello@sashaburger.co.nz"&gt;hello@sashaburger.co.nz&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- End of Info --&gt;
  &lt;/div&gt;
  &lt;!-- End of wrapper --&gt;
  
  &lt;!-- JS --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="main.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>