I'm making a photo gallery with a bootstrap 4 carousel but the image looks like this on the left side of it:
I have tried to give it a margin-left but the image is not responsive so I have removed it, here I leave the html code
<h3 class="card-title text-center" style="margin-top: 10px;">AGUAS OCULTAS</h3>
<div class="container">
<div class="row justify-content-center">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="9"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/aguas10.jpg" alt="" id="aguas10" onclick="imagen('aguas10')" class="img-fluid">
</div>
<div class="carousel-item">
<img src="img/aguastodas.png" alt="Análisis territorial.
Unión de diferencias" id="aguas2" onclick="imagen('aguas2')">
</div>
<div class="carousel-item">
<img src="img/aguaspa.png" alt="Parte alta. Presencia de
Niebla." id="aguas3" onclick="imagen('aguas3')">
</div>
<div class="carousel-item">
<img src="img/aguascc.png" alt="Cuatro Corredores.
Quebradas." id="aguas4" onclick="imagen('aguas4')">
</div>
<div class="carousel-item">
<img src="img/aguasze.png" alt="Zona de Encuentro.
Transición" id="aguas5" onclick="imagen('aguas5')">
</div>
<div class="carousel-item">
<img src="img/aguasda.png" alt="Domesticación del Agua. Agua al
mar" id="aguas6" onclick="imagen('aguas6')">
</div>
<div class="carousel-item ">
<img src="img/agua7.jpg" alt="Análisis territorial. Estrategias
por estrato" id="aguas7" onclick="imagen('aguas7')">
</div>
<div class="carousel-item ">
<img src="img/agua8.jpg" alt="Fotomontaje" id="aguas8" onclick="imagen('aguas8')">
</div>
<div class="carousel-item ">
<img src="img/agua9.jpg" alt="Fotomontaje" id="aguas9" onclick="imagen('aguas9')">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Atrás</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</div>
</div>
I hope you can help me.
There is a class in bootstrap 4 (I don't know if it exists in previous versions) that is used to center the images.