No able to center Elements in the DIV - html

Question

Hi I am having trouble centering elements on mobile.
Website: https://dachsteinkaffee.myshopify.com/
I have set the margin-right of elements col-12 col-md-6 col-lg-4 to 0px but it looks like the margin is still appearing.
Tried to apply text-align:center to the class .img-box. But it did not help.
I have tried different options like this that did not work:
#media (max-width: 991px) {
#home-spotlight-1541414200176 .container-fluid .spotlight-3-blocks {
text-align: center;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<span> ZUM KAFFEE </span>
</div>
</div>
</div>
</div>
Any idea how to fix this?

Answer 1

First, in your demo code here, there is no #home-spotlight-1541414200176 .container fluid so it won't work here.
Then this margin right is auto generated to fill the empty as your image is not enought large to cover the whole space.
Just apply text-align:center to your class .img-box:
DEMO:
#media (max-width: 991px) {
.img-box {
text-align: center;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<span> ZUM KAFFEE </span>
</div>
</div>
</div>
</div>

Answer 2

Try this
there was an issue in #home-spotlight-1541414200176 .container-fluid
#media (max-width: 991px) {.spotlight-3-blocks {
text-align: center;
}}
<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
<div class="spotlight-item">
<div class="img-box">
<a href="" class="animate-scale">
<img
data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
alt="Dachsteinkaffee"
itemprop="logo"
class="lazyautosizes lazyloaded"
data-sizes="auto"
sizes="370px"
/>
</a>
</div>
<div class="content spotlight-inner">
<h3 class="title"><span> MORGENGRUSS </span></h3>
<p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
<span> ZUM KAFFEE </span>
</div>
</div>
</div>