the issue is that on only one page that has bootstrap applied to it, my footer content gets bunched together with no space between items whereas my other pages that have the same footer are having proper spacing that’s expected.
i have tried to move the css rules from my imported css file to my main css file and then by applying display:flex and playing around with margins 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 since the css styling file for footer is shared among 5 other pages?
this is my initial 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-info-containers {
  width: 25%;
}

heres the html:

<footer>
  <div id="footer-info-section">
    <div class="footer-info-containers">
     content
    </div>
    <div class="footer-info-containers"> 
     content
    </div>
    <div class="footer-info-containers">
     content
    </div>
  </div>
</footer>