slick including unintended spacing in the end

**Problem for the homepage**
I have styling for Navbar set with
```
.nav-links {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 2rem;
width: 100vw;
height: 100vh;
font-size: 2rem;
color: #fff;
background: #272727;
transition: opacity 0.5s 0.5s, clip-path 0.7s 0.5s;
clip-path: circle(200px at top right);
}
```
when navbar input is checked(hamburger),
```
.menu-btn:checked ~ .nav-links {
opacity: 1;
clip-path: circle(100% at center);
}
```
I have this working perfectly for all my pages except homepage which contains react-slick, and I found out its the one which is actually causing the problem because when I remove this ` {items}` it works perfectly just like other pages fully covering 100vh but somehow react-slick is causing the problem. I have tried removing all the styling done manually to check if it was working, even shortlisting the settings was also not able to do anything.
```
const settings = {
PauseOnHover: true,
dots: true,
infinite: true,
autoplay: true,
swipeToSlide: true,
speed: 1300,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
};
```

**When working perfectly**

To be noted this **happens only in mobile browsers**, I have tested this in Desktop browsers (chrome,mozilla) looking for responsiveness and it works perfectly but soon as I get this page running in all my android phones this bug just happens for no reason