Slick Carousel bigger width than parent element - html

Question

I 've got the following code, and when I am viewing on mobile the Slick Carousel is bigger than the parent element and I couldn't fix it with any settings. I am using Boostrap as well.
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/assets/Intech Logo.png" alt="INTECH DYNAMICS logo" />
</a>
</div>
</nav>
<div class="wrapper-section-1">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center imagine">
<img class="img img-fluid floating" src="/assets/Header Image.png" alt="Careers banner image" />
</div>
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center">
<div class="row">
<div class="col-lg-12 title">
<h1 class="text-title">CAREERS</h1>
</div>
<div class="col-lg-12 slide">
<div class="single-item slider slide">
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Darius Opro</span><span class="font-weight-normal"> Full Stack
Programmer</span>
</div>
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Cosmin Mihalache</span><span class="font-weight-normal"> Front End
Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The CSS looks like this:
.wrapper-section-1 {
font-family: IBMPlexSans-Medum;
color: white;
margin-top: 54px;
width: auto;
padding: 8vh;
background-image: linear-gradient(to right, #1c003b, #5216aa);
}
.img {
max-width: 70%;
height: auto;
}
.imagine {
padding: 30px 0 30px 0;
}
.title {
align-items: flex-end;
display: flex;
justify-content: flex-end;
}
.text-title {
margin-bottom: 2rem;
}
/* Slick Carousel */
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.2;
}
.slick-active {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
.slide {
width: 500px;
margin: 0;
text-align: right;
background-color: blue
}
/* Custom Arrows */
.prev-arrow {
position: absolute;
bottom: -50px;
left: 400px;
cursor: pointer;
}
.next-arrow {
right: 3px;
position: absolute;
bottom: -50px;
cursor: pointer;
}
/* Floating Animation */
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
$(document).on("ready", function () {
$(".single-item").slick({
lazyLoad: "ondemand", // ondemand progressive anticipated
infinite: true,
settings: "unslick",
prevArrow:
'<span class="prev-arrow"><i class="fas fa-angle-left"></i></span>',
nextArrow:
'<span class="next-arrow"><i class="fas fa-angle-right"></i></span>',
});
});
I attached a photo to have a better idea of what is happening. I tried to give to the carousel padding, to set width in percentage with parent element but nothing worked.
Update: Pretty sure that JS has nothing to do with it but I attached anyway