Currently working on coding a footer with a grid/table using Bootstrap 4. However, encountering an issue where there's no spacing between the first and second rows in the grid. Oddly enough, there is spacing between all other columns. Can anyone provide assistance with this? Here's the Codepen link: https://codepen.io/rooiboQuality/pen/oNgdyPY
HTML:
<footer>
<div class="footer-text">
<div class="footer-main container-fluid">
<div class="row">
<div class="col-sm">
<p>Specialer</p>
</div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm">
<p>Kontakt</p>
</div>
</div>
<div class="row">
<div class="col-sm"><a href="#">Akupunktur</a></div>
<div class="col-sm"><a href="#">Ansigtsmassage</a></div>
<div class="col-sm"><a href="#">Ledmanipulation</a></div>
<div class="col-sm"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3135342e3b312e1a29303b3f3...
CSS (+ Bootstrap):
footer {
padding: 60px 0 20px 0;
background-color: #000;
color: #fff;
position: relative;
}
.footer-text {
width: 75%;
display: inline-block;
}
footer img {
position: absolute;
right: 35px;
bottom: 0;
width: 20%;
}
footer .container-fluid {
width: 100%;
margin: 0;
margin-left: 60px;
}
footer p, footer a {
color: #BFBFBF;
}
footer .row:nth-child(1) .col-sm p {
font-size: 1.3em;
color: #fff;
}
.footer-info {
margin-top: 35px;
}