Hi all,

I attempted to make an unordered list for my footer, however the css doesn't seem to be working in Salesforce Communities, even though i've trialed in it's own seperate html file and it works. 

This is my html
 

<div class = "site-footer">
<div class="container py-5">
  <div class="row">
      <img src = "" alt="footer logo"/>
    </div><br/>
    <div class = "row">

    <div class="col-6 col-md">
      
      <h5>HEAD OFFICE</h5><br/>
      <ul>
        <li>71-75 Shelton Street</li>
        <li>Covent Garden</li>
        <li>London United Kingdom</li>
        <li>WC2H 9JQ</li><br/>
        <li>+44 (0)20 3916 5004</li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>MAINTENANCE</h5><br/>
      <ul>
        <li><a class="text-muted" href="https://velezmanagedservices.com/break-fix/">Breakfix</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/server-maintenance/">Server Maintenance</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/storage-maintenance/">Storage Maintenance</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/network-maintenance/">Network Maintenance</a></li>
         <li><a class="text-muted" href="https://velezmanagedservices.com/asset-management/">Asset Management</a></li>
          <li><a class="text-muted" href="https://velezmanagedservices.com/data-centre-services/">Data Centre Services</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>USEFUL LINKS</h5><br/>
      <ul>
        <li><a class="text-muted" href="https://velezmanagedservices.com/about-us/">About Us</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/careers/">Careers</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/contact/">Contact</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/partner/">Partner</a></li>
        <li><a class="text-muted" href="https://velezmanagedservices.com/partner/">Legal</a></li>
      </ul>
    </div>
  </div>
</div>
</div>

My css

.site-footer
{
  background-color:#262626;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}

ul{
  list-style-type: none;
  margin: 0px !important;
  padding: 0px !important;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}

.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}