title: Owl Carousel - Items are stacking on top of each other
body: <p>I'm trying to group images into groups of 8, and use each grouping as a separate slide for Owl Carousel. However, rather than stacking horizontally like normal, the groupings are just stacked vertically.</p>
  
  <p>My owl settings:</p>
  
  <pre class="lang-js prettyprint-override"><code>//Gallery carousel
  gallery();
  function gallery(){
    $('.gallery').owlCarousel({
      margin: 10,
      nav: true,
      items: 1,
    });
  }
  </code></pre>
  
  
  
  <p>The php generating the HTML (uses ACF gallery plugin for WordPress)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- Gallery Thumbs --&gt;
  &lt;?php 
  $images = get_field('gallery');
  
  if( $images ): ?&gt;
      &lt;div class="gallery"&gt;
          &lt;div class="gallery-group"&gt;&lt;!-- Group the images in pairs of 8 --&gt;
              &lt;?php $i = 0; ?&gt;
  
              &lt;?php foreach( $images as $image ): ?&gt;
  
                  &lt;?php $caption = $image['caption']; ?&gt;
                      &lt;a data-fancybox="gallery" href="&lt;?php echo $image['url']; ?&gt;"&gt;
                          &lt;img src="&lt;?php echo $image['sizes']['thumbnail']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" /&gt;
                      &lt;/a&gt;
  
                  &lt;?php if ($caption): ?&gt;
                      &lt;p&gt;&lt;?php echo $caption; ?&gt;&lt;/p&gt;
                  &lt;?php endif; ?&gt;
  
                  &lt;?php $i++; ?&gt;
  
                  &lt;?php if ($i % 8 == 0): ?&gt;
                      &lt;/div&gt;
                      &lt;div class="gallery-group"&gt;
                  &lt;?php endif; ?&gt;
  
              &lt;?php endforeach; ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;?php endif; ?&gt;
  </code></pre>
  
  
  
  <p>I got the following CSS that applies to the carousel:</p>
  
  <pre><code><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hentry{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .gallery{
    width: 1000px;
  }</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <p>I've included <code>owl.carousel.min.css</code> and <code>owl.theme.default.min.css</code>, and I'm running the latest version of jQuery. No errors in the console.</p>
  
  <p>I'm not sure if this has anything to do with it, but one thing to note is that I use negative margins on some elements like my header and footer to stretch out background colors. Perhaps this is affecting things?</p>