title: How to remove the background in a slick carousel?
body: <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>