Why not adapt slick slider?

Question

css

For what reason does adaptivity not work for slick slider?. May need extra. write settings?
Settingsslick'a

$(document).ready(function(){
  $('.head-slider__slider').slick({
    dots: true,
    infinite: true,
    speed: 1000,
  });
});

Slider structure:

.head-slider {
  display: flex;
  align-items: center;
  min-height: 900px;
  background: url(../img/sliders/slide_img.jpg);
  background-size: cover;
  background-position: fixed;
  .head-slider__slider {
    width: 100%;
    border: 2px solid green;
    .slider__slide {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      min-height: 500px;
      .slide__slide-header {
        h2 {
          font-size: 7rem;
          font-family: @FfontRaleway;
          font-weight: @WfontSemiBold;
          color: @whiteColor;
        }
      }
      .slide__slide-description {
        font-size: 5rem;
        font-family: @FfontRaleway;
        font-weight: @WfontLight;
        color: @whiteColor;
      }
      .slide__slide-buttons {
        a {
          .lightButtons(@whiteColor);
          margin-right: 1%;
        }
      }
    }
  }
}

<section class="head-slider">
  <div class="container">
    <div class="head-slider__slider">
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
            <svg class="slide-header__underline">
              <use xlink:href="#underline"></use>
            </svg>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
    </div>
  </div>
</section>

I tried turning off display: flex for the .head-slider, it helped, the slider became responsive, but in that case the slider is not in the middle of the section, which is what I used flex for.
The layout itself: uzinouzi.github.io/testtemplate

Answer 1

Set .container width: 100% to match the width of the parent.