Apologies for this question, but CSS is not my thing. I just can't wrap my head around it.
I'm attempting to superimpose some text and a button on an image, but the result is that they overflow from the image;
https://i.sstatic.net/IlfdP.png
This snippet contains the entire card code;
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<h4 class="text-primary">{{ listing.title }}</h4>
<div>
<img class="card-img-top" src="{{ listing.map_url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">£{{ listing.price|floatformat }}</span>
</h2>
</div>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<p>
<i class="fas fa-map-marker text-secondary"></i> {{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
Bills Inc:   {% if listing.bills_inc %}
<i class="fas fa-check"></i> {% else %}
<i class="fas fa-times"></i> {% endif %}
</div>
<div class="col-6">
Deposit: {% if listing.deposit %} £{{ listing.deposit|floatformat }} {% else %}
<i class="fas fa-times"></i> {% endif %}
</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i> Type: {{ listing.type|title }}</div>
<div class="col-6">
<i class="fas fa-bath"></i> Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i> by {{ listing.advertiser_type }} {{ listing.advertiser_name|title }}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i> {{ listing.list_date | timesince }}</div>
</div>
<hr>
<a href="{% url 'listing' listing.id %}" class="btn btn-primary btn-block">More Info</a>
</div>
</div>
</div>If you could also overlay 'London, N20' at the bottom of the map, you'll earn bonus points (upvote).
Thank you in advance.