Estoy haciendo una galería de fotos con un carousel de bootstrap 4 pero la imagen se me ve al lado izquierda de este así:
He intentado darle un margin-left pero la imagen no me queda responsive así que lo he quitado, acá dejo el código html
<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>
Espero puedan ayudarme.
display
de la imagen