Между двумя первыми рядами сетки bootstrap нет места

Question

По сути, я кодирую нижний колонтитул, для которого я сделал сетку / таблицу, используя Bootstrap 4. В любом случае, по какой-то причине, между первым и вторым рядом сетки нет промежутков. С другой стороны, есть интервал между всеми остальными столбцами. Может ли кто-нибудь помочь мне? Вот кодекс: 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:kontakt@sjaeloglegme.dk">kontakt@sjaeloglegeme.dk</a></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Piskesmældsbehandling</a></div>
                <div class="col-sm"><a href="#">Hovedbundsmassage</a></div>
                <div class="col-sm"><a href="#">Kinesiotape</a></div>
                <div class="col-sm"><p>Telefon: +45 41 42 41 08</p></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Akut skadesbehandling</a></div>
                <div class="col-sm"><a href="#">Migræner</a></div>
                <div class="col-sm"><a href="#">Manuel terapi</a></div>
                <div class="col-sm"><p>Lene Haus Vej 21 st. tv</p></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Triggerpunktsbehandling</a></div>
                <div class="col-sm"><a href="#">Bindevævsmassage</a></div>
                <div class="col-sm"><a href="#">Medicinsk akupunktur</a></div>
                <div class="col-sm"><p>CVR: 33690193</p></div>

            </div>

        </div>

        <div class="footer-info container-fluid">

            <p>Sjæl og Legeme Helsepartner V/ Jens Erik Pedersen  |  Lene Haus Vej 21 1. sal tv.  |  7430  |  Ikast  |  Tlf. 41 42 41 08  |  kontakt@sjaeloglegeme.dk</p>

        </div>

    </div>

    <img src="https://i.ibb.co/QcsqrzG/man.png" alt="man">

</footer>

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;
}

Answer 1

По умолчанию есть тег margin-bottom: 1rem; для <p>, который вы используете во всех других строках, кроме первого ряда. Вот почему между всеми остальными строками есть интервал.

Вы можете указать поле <a> и <p> в вашем css для переопределения стилей по умолчанию.

footer p, footer a {
    display:block; //making anchor block element otherwise it won't take margin 
    margin: 1em 0;
    color: #BFBFBF;
}

Надеюсь, это поможет!