Why does slick slider connect blocks?

Question

css

I made an option without a slider (on top) there are indents (because the width is 360px), with the slider everything merges into a heap (width 380px)
Why does this happen and how to fix it?

<div class="container">
    <div class="card-slider">
      
        <div class="portfolio__card">
          <img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
          <h3 class="portfolio__card_name">
            Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
          </h3>
          <p class="portfolio__card_description">
            С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
          </p>
          <span class="porftolio__card_price">от 126 000 руб.</span>
        </div>
      
    
                <div class="portfolio__card">
          <img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
          <h3 class="portfolio__card_name">
            Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
          </h3>
          <p class="portfolio__card_description">
            С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
          </p>
          <span class="porftolio__card_price">от 126 000 руб.</span>
        </div>
      
      
                <div class="portfolio__card">
          <img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
          <h3 class="portfolio__card_name">
            Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
          </h3>
          <p class="portfolio__card_description">
            С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
          </p>
          <span class="porftolio__card_price">от 126 000 руб.</span>
        
      </div>
    </div>
</div>

$(document).ready(function(){
      $('.card-slider').slick({
        slidesToShow: 3
      });
    });

Answer 1

It is desirable to fill in full-fledged working examples, then it was possible not only to look, but also to correct.
You most likely styled the portfolio_card, but you didn't learn that each slide in a slick slider has its own properties, including that it resets the margin to work correctly. It’s best to add a wrapper for each slide, and inside make your own blocks as you like:

<div class="container">
  <div class="card-slider">
    <div>
      <div class="portfolio__card">
        <img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
        <h3 class="portfolio__card_name">
          Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
        </h3>
        <p class="portfolio__card_description">
          С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
          систем массового участия.
        </p>
        <span class="porftolio__card_price">от 126 000 руб.</span>
      </div>
    </div>
    <div>
      <div class="portfolio__card">
        <img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
        <h3 class="portfolio__card_name">
          Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
        </h3>
        <p class="portfolio__card_description">
          С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
          систем массового участия.
        </p>
        <span class="porftolio__card_price">от 126 000 руб.</span>
      </div>
    </div>
    <div>

      <div class="portfolio__card">
        <img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
        <h3 class="portfolio__card_name">
          Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
        </h3>
        <p class="portfolio__card_description">
          С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
          систем массового участия.
        </p>
        <span class="porftolio__card_price">от 126 000 руб.</span>
      </div>
    </div>
  </div>
</div>

Answer 2

You can fix it by adding margins for the slides. Pay attention to the specificity, perhaps your styles are interrupted.