He creado un sistema Grid con solo 2 columnas. El primero es texto y en el segundo he incluido un carrusel. He configurado el tamaño de la imagen como personalizado para la imagen del carrusel. No importa lo que haga, no puedo centrar la imagen del carrusel dentro de mi columna en el centro horizontalmente.
.title-sec { color: #fff; padding-top: 100px; padding-bottom: 100px; } .carousel { width: 400px; height: auto; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container title-sec"> <div class="row"> <div class="col text-center my-auto"> <h1 class="heading1"> Sample Text</h1> <h2 class="heading2">Sample Breifing</h2> </div> <div class="col m-auto"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/300" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/300" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/300" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>Debe aplicar el centrado al carrusel, no al contenedor (a menos que aplique flexbox, que en realidad no es necesario).
Puse .mx-auto en .carousel .
.title-sec { color: #fff; padding-top: 100px; padding-bottom: 100px; } .carousel { width: 400px; height: auto; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container title-sec"> <div class="row"> <div class="col text-center my-auto"> <h1 class="heading1"> Sample Text</h1> <h2 class="heading2">Sample Breifing</h2> </div> <div class="col bg-secondary"> <div id="carouselExampleFade" class="carousel slide carousel-fade mx-auto" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/600" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/600" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/600" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>