After spending three days grappling with this code snippet, I have finally hit a roadblock. My current challenge involves adding a spacer between images, but only excluding the center icon when the browser or phone width is set to small or below. Despite my attempts using @media queries and Bootstrap classes like mt-md-2, nothing seems to work. Here's the code I've been working on - hopefully, someone can spot what I'm missing.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-xs-3 margin-3">
<div class="atomix">
<img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
</div>
<div class="col-lg-12 col-xs-3">
<div class="Rectangle playersOnline mx-auto d-block">
<p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-xs-3">
<div class="navBar1">
<img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
</div>
</div>
<div class="row margin-4">
<div class="col-lg-5 col-xs-3 mt-md-2">
<div class="webStore mt-md-2">
<a href="https://atomixnetwork.buycraft.net/"><img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-2 col-xs-3 margin-15">
<div class="forums">
<a href="https://www.atomixprisonmc.net/"><img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-5 col-xs-3 mt-md-3">
<div class="discord mt-md-3">
<a href="https://discord.gg/D63c9JM"><img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js\bootstrap.min.js">
</script>