Weird space on page with slick slider?

Question

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.

$(document).ready(function(){
    $('.forss').slick({
        centerMode: true,
        centerPadding: '0w',
        slidesToShow: 3.625,
      });
  });

// 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;
}






    Slider
    
  
    

    




    The Lowdown.

    
        CONTACT US
        EDITIONS
        ARTICLES
        ABOUT US
        HOME
        
      

    
        
            
            
         
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    

    
                 READ ME

user_287476 · Answer

There are some issues with using the viewport width (vw) for the slideshow elements (slideshow and slide navigation). Since there is padding on the body element, the content width will include that, which forces the page width to equal (viewport width + body left padding + body right padding). I was able to remove the horizontal scrollbar by changing/adding the CSS below:

div.slick-slider {
    // width:100vw;
}

#inner {
    width: 100% !important;
    ...
}

body {
    margin-left: 0;
    margin-right: 0;
    ...
}

Note: these changes may not be reflected in the SO preview below. For some reason, I'm not seeing the updates to the .slick-slider and body CSS reflected there.

$(document).ready(function(){
    $('.forss').slick({
        centerMode: true,
        centerPadding: '0w',
        slidesToShow: 3.625,
      });
  });

// navigation.css

body {
    background-color: #5336F8;
    font-family: Futura PT;
    margin-left: 0;
    margin-right: 0;
}
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 {
    margin: 0;
}

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: 100% !important;
    margin-bottom: 4vw;
}

#centered {
    text-align: center;
}






    Slider
    
  
    

    




    The Lowdown.

    
        CONTACT US
        EDITIONS
        ARTICLES
        ABOUT US
        HOME
        
      

    
        
            
            
         
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    

    
                 READ ME

Weird space on page with slick slider?

1 Answers