title: Slick slider gets wrong width
body: <p>My slick slider gets wrong width when initialized and when I change screen resolutions.</p>
  
  <p>My js:</p>
  
  <pre><code>$('.slider').slick({
      infinite: false,
      speed: 300,
      initialSlide: 1,
      slidesToShow: 3,
      slidesToScroll: 1,
      dots: false,
      responsive: [{
          breakpoint: 1024,
          settings: {
              slidesToShow: 2
          }
      }, {
          breakpoint: 650,
          settings: {
              initialSlide: 2,
              slidesToShow: 1
          }
      }]
  });
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>.sub-slider {
      width: 100%;
      display: flex; 
      flex-flow: column;
  
      .slider {
          display: flex;   
          flex-flow: row;
          justify-content: center;
          align-content: center;
          align-items: center;
          min-width:500px;
  
          .sub-box {
              text-align: center;
              padding-top: 45px;
              cursor:pointer;
  
              .title {
                  color: #6deca0;
                  font-family: "AmsiProNarw", sans-serif;
                  font-size: 48px;
                  font-style: italic;
                  font-weight: 800;
              }
              .price {
                  color: #393939;
                  font-family: "AmsiProNarw", sans-serif;
                  font-size: 18px;
                  font-style: italic;
                  font-weight: 800;
              }
              .sub-slider-btn {
                  margin: 60px 20px;
                  border-color: #eaeaea!important;
                  background-color: #fdfdfd!important;
                  color: #686868!important;
              }
          }
  
          .sub-box:hover { 
              transition: border .2s;            
              border-bottom: 14px solid #6deca0;
              .sub-slider-btn{
                  border-color: #6deca0!important;
                  background-color: rgba(108,235,159,.2)!important;
                  color: #393939!important;
              }
          }
      }
  
      .sub-slider-confirmation-btn-wrp { 
          align-self: center;
          display: none;
          .sub-slider-confirmation-btn {
              cursor:pointer;
              $margin: 20px;
              $height: 45px;
              height: $height;
              width: 80px;
              border: 1px solid #ccc;
              border-radius: 8px;
              margin: $margin $margin $margin $margin;
              text-align: center;
              line-height: $height;  
              font-weight: 800;
          }
      }
  
  }
  </code></pre>
  
  <p>This is how it is loaded, even though I have specified <code>slidesToShow: 3</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/EiMO6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EiMO6.png" alt="slider error"></a></p>
  
  <p>Then when I change to resposive it looks like this:
  <a href="https://i.stack.imgur.com/QVhM3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QVhM3.png" alt="enter image description here"></a></p>
  
  <p>I am not sure how to fix this. I have read through these, with no fix: </p>
  
  <p><a href="https://stackoverflow.com/questions/44989655/slick-slider-wrong-width-on-initialization">Slick slider wrong width on initialization</a></p>
  
  <p><a href="https://stackoverflow.com/questions/36944421/slick-carousel-loads-the-wrong-width-on-initialization">Slick carousel loads the wrong width on initialization</a></p>
  
  <p><a href="https://github.com/kenwheeler/slick/issues/790" rel="noreferrer">https://github.com/kenwheeler/slick/issues/790</a></p>
  
  <p><a href="https://github.com/kenwheeler/slick/issues/1180" rel="noreferrer">https://github.com/kenwheeler/slick/issues/1180</a></p>
  
  <p><a href="https://github.com/kenwheeler/slick/issues/2167" rel="noreferrer">https://github.com/kenwheeler/slick/issues/2167</a></p>
  
  <p>edit:</p>
  
  <p>I made a fiddle <a href="https://jsfiddle.net/simeydotme/fmo50w7n/" rel="noreferrer">https://jsfiddle.net/simeydotme/fmo50w7n/</a></p>
  
  <p>It seems to work in the fiddle, but not on my site. Maybe I inherit some bad css? But I've been trying to debug this for 5h now. And I cant find any solution..</p>