本地Wordpress网站与本地Web服务器呈现的CSS有所不同

Question

我很生气，试图解决这个问题。 因此，基本上我已经写了一个静态HTML-CSS页面，以便在Wordpress自定义主题中实现它。

我在页脚中有三个社交按钮，在静态主题中它们可以正常工作（我将Webpack与HtmlWebpackPlugin一起用于本地前端开发）。它们是列表元素内的三个链接：

<ul class="li-h li-h-centered">
  <li class="s-hover-facebook">
    <a href="#">
      <i class="fab fa-facebook-f"></i>
    </a>
  </li>
  <li class="s-hover-instagram">
    <a href="#">
      <i class="fab fa-instagram"></i>
    </a>
  </li>
  <li class="s-hover-twitter">
    <a href="#">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>

驱动整个事情的CSS是（实际上是SCSS，但您知道了）

&__social {
padding: .5em 2em;
&>ul>li>a {
  display: block;
}
&>ul>li {
  display: inline-block;
  border-radius: 50%;
  margin: 0 .2em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: #333;
}
font-size: 1.8em;
}

静态网站中的结果是：

在Wordpress网站中的结果是：

我真的不知道这是怎么回事，有什么建议吗？