سلام و وقت بخیر این افزونه slick را می خواهم به سایتم اضافه کنم منتهی در حالت عادی به درستی کار می کنه ولی وقتی css سایت را اولش اضافه می کنم بهم می ریزد چطوری می توانیم این مسئله را حل کنیم؟ ممنون می شویم راهنمایی کنید
کد HTML:
<!DOCTYPE html><html><head>  <title>Slick Playground</title>	<meta charset="UTF-8">    <link rel="stylesheet" href="https://libsan.ir/css/app.css">	<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>	<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>  <style type="text/css">     </style></head><body><style type="text/css">    html, body {      margin: 0;      padding: 0;    }
    * {      box-sizing: border-box;    }
    .slider {        width: 90%;        margin: 100px auto;    }
    .slick-slide {      margin: 0px 20px;    }
    .slick-slide img {      width: 100%;    }
    .slick-prev:before,    .slick-next:before {      color: black;    }

    .slick-slide {      transition: all ease-in-out .3s;      opacity: .2;    }        .slick-active {      opacity: .5;    }
    .slick-current {      opacity: 1;    }  </style>    <section class="center slider">    <div>      <div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div>      <div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>    <div><div><img src="https://ebookcentral.proquest.com/covers/4102350-s.jpg" width='100' height='130'></div>    </div>  </section>      <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>		  <script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>  <script type="text/javascript">  $(document).on('ready', function() {    $('.center').slick({  centerMode: true,  centerPadding: '60px',  slidesToShow: 5,  responsive: [    {      breakpoint: 768,      settings: {        arrows: false,        centerMode: true,        centerPadding: '40px',        slidesToShow: 3      }    },    {      breakpoint: 480,      settings: {        arrows: false,        centerMode: true,        centerPadding: '40px',        slidesToShow: 1      }    }  ]});    });</script>
</body></html>