hope yall are doing okay. i have 5 different pages and they all have the same footer and header.
i created one css file and imported it in all of my 5 pages, they all are wokring fine except for one page that has bootsrap 4.0.0 applied to it. whats happening is that its causing my footer content to get bunched together with no space between items.
i have tried to use the inspect tool but there seems to be no specific rules overriding my spacings. (or maybe im not knowledgable enough to tell :/ )
what i have tried:
i tried to move the css rules from the imported file to the main styling file and then with a little bit of altering the rules such as applying display:flex and playing around with margins and spacing i managed to make it look more desirable but it doesnt seem like an efficient solution to me and it makes my code dirty and confusing.
any suggestions on what i should do instead to take care of this problem?

heres my html:

 <footer>
        <div id="footer-info-section">
            <div class="footer-info-containers">
                <h5 class="footer-heading">x</h5>
                <ul id="socials-list">
                    <li><a><img class="socials-icons" src="x"></a></li>
                    <li><a><img class="socials-icons" src="x"></a></li>
                    <li><a><img class="socials-icons" src="x"></a></li>
                </ul>
            </div>
            <div class="footer-info-containers" id="hours-info">
                <h5 class="footer-heading">x</h5>
            </div>
            <div class="footer-info-containers" id="contactus-info">
                    <h5 class="footer-heading">x</h5>
                    <table>
                         x
                    </table>
            </div>
        </div>
            <iframe id="googlemap" src="x" width="600" height="200" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe>
    </footer>

heres my related css:

footer{
    z-index: -2;
    position: sticky;
    bottom: 0;
    color: #ddd;
    direction: rtl;
}
#footer-info-section{
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: space-around;
    align-items: start;
}
.footer-heading{
    color: #fff;
    font-size: var(--font-size-one);
    border-bottom: #44338e 1px solid;
}
.footer-info-containers{
    width: 25%;
}
#socials-list{
    display: flex;
    justify-content: space-around;
    padding-inline: 0;
}
.socials-icons{
    width: 30px;
}
#contactus-info table{
    margin: auto;
}
#googlemap{
    margin: 0 auto ;
    display:block;
}