How to remove the background in a slick carousel?
<p><strong>HTML</strong></p>

<pre><code>    &lt;div class="background"&gt;    
      &lt;div class="slick-test"&gt;
        &lt;div class="first-test"&gt; Slide one&lt;/div&gt;
        &lt;div class="sec-test"&gt;Slide two&lt;/div&gt;
        &lt;div class="third-test"&gt;Slide three&lt;/div&gt;
        &lt;div class ="fourth-test"&gt;Slide four&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.background  {
    position: relative;
    top: 7.5%;
    left: 5%;
    right: 5%;
    background-color: rgba(187, 189, 193, 0.8); 
    background-color: rgba(187, 189, 193);
    box-sizing: border-box;
    border-radius: 15px;    
    width: 90%;
    height: 85%;
    padding: 30px;
}
</code></pre>

<p><strong>Javascript</strong></p>

<pre><code>    $(document).ready(function() {
      $('.slick-test').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        variableWidth: true
      });
    });
</code></pre>

<p>However the background of the slick carousel comes over my background, how do i remove it?
I also can't seem to get a margin between each of my slides, why is that?
Thanks!</p>

<p>My JSfiddle: <a href="https://jsfiddle.net/953jmndf/" rel="nofollow noreferrer">https://jsfiddle.net/953jmndf/</a></p>