title: Weird space on page with slick slider?
body: <p>I'm creating a website with slick slider and have got the plugin working smoothly, but there is a weird space on the left that is causing the site to have a horizontal slider. I have tried maxing out the viewports of the containers but to no avail? Is there a way to remove this white space so that there is no horizontal slider.</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>$(document).ready(function(){
      $('.forss').slick({
          centerMode: true,
          centerPadding: '0w',
          slidesToShow: 3.625,
        });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// navigation.css
  
  body {
      background-color: #5336F8;
      font-family: Futura PT;
  }
  ul {
      position: relative;
      left: 3vw;
      list-style-type: none;
      overflow: hidden;
      margin: 3vw 1vw 0 0;
      background-color: transparent;
      display: inline-block;
  }
  
  li {
      float: right;
      font-size: 1.5vw;
  }
  
  
  li a {
      display: block;
      font-weight: lighter;
      float: right;
      color: white;
      margin: 0 0.5vw 0 0.5vw;
      text-align: center;
      padding: 0.75vw 2vw;
      text-decoration: none;
  }
  
  li a:not(.active):hover {
      background-color: white;
      color: #5336F8;
      border: 1px; 
  }
  
  .active {
      border: 1px solid white;
  }
  
  
  
  .logo {
      font-family: Futura PT;
      float: left;
      font-size: 4vw;
      margin: 2vw 5vw 0 3.5vw;
      color: white;
      font-weight: 550;
  }
  
  .logo:hover {
      color: #5336F8;
      text-shadow: 1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }
  
  // style.css
  
  
  div.slick-slider {
      width:100vw;
  }
  
  .forss {
      display: flex;
      align-items: center;
      box-sizing: border-box;
  }
  
  .forss .items {
      width: 30vw;
      height: 35vw;
      margin-top: 7vw;
  }
  
  .forss .items img {
      width: 24.840625vw;
      height: 31.25vw;
  }
  
  .slick-slide {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
      
      transition:transform 0.5s ease-in-out;
  }
  
  .slick-slide:focus {
          outline: none;
  }
  
  div.slick-track {
      width: 100vw;
  }
  
  div.slick-center {
      -webkit-transform: scale(1.15);
      -moz-transform: scale(1.15);
      transform: scale(1.15);
      transition: transform 0.5s ease-in-out;
  }
  
  #arrows {
      width: 1vw;
      height: 1vw;
      text-align: center;
      position: relative;
  
  }
  
  .logo {
      font-family: 'Futura-Normal';
      font-size: 4vw;
      color: white;
      float: left;
      margin-left: 2vw;
  }
  
  .top  {
      position: absolute;
      mix-blend-mode: screen;
      left: 0;
      right: 0;
      opacity: 100%;
      transition: opacity 0.15s;
  }
  
  .top:hover {
      opacity: 0%;
  }
  
  .bottom img {
      position: relative;
      left: 0;
      right: 0;
  }
  
  
  input.prev:focus {
      outline-width: 0;
  }
  
  input.next:focus {
      outline-width: 0;
  }
  
  .add-on {
      font-family: (var(--font));
      font-size: 1.75vw;
      color: white;
      margin-left: 2vw;
      margin-right: 2vw;
      margin-bottom: 1vw;
  }
  
  #inner {
      position: relative;
      width: 100vw;
      margin-bottom: 4vw;
  }
  
  #centered {
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Slider&lt;/title&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/&gt;
    &lt;!--style.css--&gt;
      &lt;link rel="stylesheet" href="https://drive.google.com/uc?export=view&amp;id=1T5ZdOkN6sg2weNQkehStYX2mDo1f0ajJ"&gt;
  &lt;!--navigation.css--&gt;
      &lt;link rel="stylesheet" href="https://drive.google.com/uc?export=view&amp;id=1IgyMKG47riH_HmnHoPLH16qhI0UtnK34"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h2 class="logo"&gt;The Lowdown.&lt;/h2&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a  href="text.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="active" href="#edition"&gt;EDITIONS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#articles"&gt;ARTICLES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#aboutus"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          
        &lt;/ul&gt;
  
      &lt;div class="forss"&gt;
          &lt;div class="items"&gt;
              &lt;img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" &gt;
              &lt;img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt=""&gt;
          &lt;/div&gt; 
          &lt;div class="items"&gt;
              &lt;img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" &gt;
              &lt;img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="items"&gt;
              &lt;img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" &gt;
              &lt;img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="items"&gt;
              &lt;img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" &gt;
              &lt;img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="items"&gt;
              &lt;img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" &gt;
              &lt;img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;div id="inner"&gt;
      &lt;div id="centered"&gt;
          &lt;input type="image" name="previous" src="https://i.ibb.co/dt3fngT/previous-arrow.png" class="prev" id="arrows" alt="Tool Tip"&gt;&lt;span class="add-on"&gt;         READ ME         &lt;/span&gt;&lt;input type="image" name="next" src="https://i.ibb.co/nL7jtPS/next-arrow.png" class="next" id="arrows" alt="Tool Tip"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/custom.js"&gt;&lt;/script&gt;
  &lt;script src="https://drive.google.com/uc?export=view&amp;id=1jzlbwu186Lrp0yF_NIcH9Zk2tSFA2PdL"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>