本地主机与生产版本不同的CSS

Question

这是生产版本https://daotec.herokuapp.com/

这是我在本地主机中看到的 在悬停按钮上，生产环境上的按钮为蓝色，在悬停按钮上变为绿色，并且具有白色边框，而在localhost中，则具有白色边框， 图标居中显示在生产版本中您看不到的位置。有人知道为什么会这样吗？还有谁能告诉我如何将六边形容器放置在屏幕的正中央？这是我的代码

CSS

.icon {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hex {
  display: flex;
  flex-direction: row;
}

.hexs {
  justify-content: center;
  padding: 30px;
  align-content: center;
  display: flex;
  flex-direction: row;
}

.hex1 {
  display: flex;
  flex-direction: column;

  width: 230px;
}

#fastest {
  padding-left: 40px;
}

.para {
  width: 200px;
  position: absolute;
}

.hexa {
  width: 104px;
  height: 60px;
  background-color: blueviolet;
}

.tri1 {
  width: 0;
  border-bottom: 30px solid blueviolet;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

.tri2 {
  width: 0;
  border-top: 30px solid blueviolet;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

.container {
  filter: drop-shadow(0 0 0.75rem black);
}

HTML

<div className="head">
  <h1>About</h1>
</div>
<hr />
<div className="hexs">
  <div className="hex">
    <div className="hex1">
      <div className="container">
        <div className="tri1"></div>
        <div className="hexa">
          <i className="fas fa-tachometer-alt icon fa-3x"></i>
        </div>
        <div className="tri2"></div>
      </div>
      <div className="fast">
        <h3 id="fastest">Fast</h3>
      </div>
      <div>
        <p className="para">
          Fast load times and lag free interaction, my highest priority.
        </p>
      </div>
    </div>
    <div className="hex1">
      <div className="container">
        <div className="tri1"></div>
        <div className="hexa">
          <i className="fas fa-laptop-code icon fa-3x"></i>
        </div>
        <div className="tri2"></div>
      </div>
      <div>
        <h3>Responsive</h3>
        <p>My layouts will work on any device, big or small.</p>
      </div>
    </div>
  </div>
  <div className="hex">
    <div className="hex1">
      <div className="container">
        <div className="tri1"></div>
        <div className="hexa">
          <i className="far fa-lightbulb icon fa-3x"></i>
        </div>
        <div className="tri2"></div>
      </div>
      <div>
        <h3>Intuitive</h3>
        <p>Strong preference for easy to use, intuitive UX/UI.</p>
      </div>
    </div>
    <div className="hex1">
      <div className="container">
        <div className="tri1"></div>
        <div className="hexa">
          <i className="fas fa-rocket icon fa-3x"></i>
        </div>
        <div className="tri2"></div>
      </div>
      <div>
        <h3>Dynamic</h3>
        <p>
          Websites don't have to be static, I love making pages come to
          life.
        </p>
      </div>
    </div>
  </div>
</div>