I'm adding a container with one row and two columns to my Bootstrap 5 site that contains an image and on the right a text. I need both to be responsive but I'm not getting it. It should look like this:
This is my code:
<body>
<div class="container-fluid bg-dark" id="about">
<div class="row">
<div class="col-md-6">
<img
style="
height: 100px;
width: 100%;
height: auto;
"
class="img-responsive"
class="ms-5"
src="https://www.gohawaii.com/sites/default/files/styles/island_curated_content_large/public/content-images/04681_1.jpg?itok=N2Ibq0uu"
alt="Honolulu"
/>
</div>
<div class="col-md-6">
<p>
Buenos Aires es la provincia y localidad más grande del estado de
Argentina. En los Estados Unidos, Honolulu es la más sureña de
entre las principales ciudades estadounidenses. Aunque el nombre
de Honolulu se refiere al área urbana en la costa sureste de la
isla de Oahu, la ciudad y el condado de Honolulu han formado una
ciudad condado consolidada que cubre toda la isla (aproximadamente
600 km² de superficie).
</p>
</div>
</div>
</div>
</div>
</body>
But it looks like this (with a left margin that I don't want) Thank you very much in advance.
I was able to fix it by changing the div like
<div class="d-flex justify-content-center bg-dark mb-3">