How to set up the bootstrap carousel? - carousel

Question

I want to add a carousel from bootstrap to my page, but it really gets me hard time to set it up on every screen, when it looks good on mobile then on big screen it increases image and cuts sides. I don't already know how many different ways I've tired to make it looks right.
<div class="row container-fluid">
<div id="slide" class="col-12 col-md-6">
<div id="carouselExampleIndicators" class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner carousel">
<div class="carousel-item active">
<img src="assets/images-car/cat1.png" class="d-block w-100"
alt="a ginger cat sitting on the stairs">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat2.png" class="d-block w-100"
alt="a black-white kitten on young buddha's hands">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat11.png" class="d-block w-100"
alt="a black cat laying on the colorful fabrics">
</div>
<div class="carousel-item">
<img src="assets/images-car/cat4.png" class="d-block w-100"
alt="a white cat with blue eyes covered in colorful fabric">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
#media only screen and (min-width: 768px) {
.carousel {width:75%; height:50vh;}}
I've tried to change display from blok to flex, then I've changed the default bootstrap width on bigger screen to 75% and maybe that wouldn't be a bad result but then I would need to move slides to center of the div but I didn't know how, nothing worked for centering whole carousel. And also when I set up the width for 75% on media screen min-width: 768px, then when I make my windows smaller the carousel gets smaller until the breakpoint for mobile, so I am not sure what media query should I set up for this to look good on every sizes.
Page photo