Create a collage for a carousel made with owlcarousel
<p>I am using a plugin called <code>owlcarousel</code> to create a carousel. The carousel and the collage have been made. The work has been tested on Google Chrome, Safari, Opera andd Firefox. Everything works fine for all of them except Firefox.</p>

<p>When the carousel is working fine, this how is displayed :
<a href="https://i.stack.imgur.com/IQz34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IQz34.png" alt="Display of the carousel on Google Chrome"></a></p>

<p>On Firefox,this is how, it looks: 
<a href="https://i.stack.imgur.com/kQBNU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kQBNU.png" alt="Display of the carousel on Firefox"></a></p>

<p>Now, this is the part of my code concerning the carousel (HTML):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="carousel-featured-sellers"&gt;
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
        
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;

        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="featured-sellers-collage"&gt;
        &lt;div class="div1"&gt;
         &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
         &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class="div2"&gt;
         &lt;img src="images/380x325-6.jpg" alt=""/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;script src="js/jquery-1.12.2.min.js"&gt;&lt;/script&gt;
     &lt;script src="js/owl.carousel.min.js"&gt;&lt;/script&gt;
     &lt;script&gt;
      (function($){
    
       $('.carousel-featured-sellers').owlCarousel({
        items: 3,
        loop:true,
        margin:15,
        nav:true,
        navText: ["&lt;span class='carousel-nav-left'&gt;&lt;i class='fa fa-chevron-left'&gt;&lt;/i&gt;&lt;/span&gt;","&lt;span class='carousel-nav-right'&gt;&lt;i class='fa fa-chevron-right'&gt;&lt;/i&gt;&lt;/span&gt;"],
        dots: true,
        responsive:{
         0:{
          items:1
         },
         430:{
          items:2
         },
         800:{
          items:3
         },
         1400:{
          items:4
         },
         1800:{
          items:6
         },
         2400:{
          items:7
         },
         3000:{
          items:9
         }
        }
       })
       
      })(jQuery);
     &lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>The part, concerning the style (CSS):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.featured-sellers-collage .div1{
 width: 100%;
}
.featured-sellers-collage .div1 p {
 margin-bottom: 0;
 margin-top: 0;
 width:50%;
}

.featured-sellers-collage .div2 {
 width: 100%;
 margin-bottom: 0;
}
.featured-sellers-collage .div1 p:first-child {
 float:left;
}
.featured-sellers-collage .div1 p:last-child {
 float:right;
}</code></pre>
</div>
</div>
</p>

<p>Please, let me know how to solve that issue.</p>