CSS包装器不会与其内容对齐

Question

我试图使用margin 0 auto;将按钮居中，但是似乎沿着Reference Image 1向右移动更多用我的巨型机生产线，当我检查时，我发现我的按钮包装纸不符合我的按钮 Reference Image 2

但是当我在这里运行代码时，它似乎可以正常工作：

.view-products {
  font-family: Bebas Neue;
  font-size: 20px;
  color: #fff;
  padding: 5px 15px;
  height: 160px;
  width: 115px;
  border-radius: 60% 60% 60% 60% / 75% 75% 45% 45%;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: 5px solid #fff;
  transition: 0.8s;
}

.view-products a {
  text-decoration: none;
  color: #fff;
}

.view-products:hover {
  background-color: #eb974e;
  color: #ffcb05;
}

.view-products a {
  color: #eb974e;
}

.button-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 115px;
}

<div class="row button-wrapper">
  <div class="col-12">
    <a href="products.html">
      <button type="button" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
    </a>
  </div>
</div>

我应该对按钮做些什么，以使其与包装物对齐？

我已经尝试删除其他对象并获得相同的结果，当我滚动Reference Image 3时它必须居中，因为它居中，而不是logo或navbar

我是Web开发人员的新手，这是我的第一个投资组合项目，我非常感谢任何可以帮助我解决这个问题的人，因为我已经尝试了很多方法，只是发现没有区别。

Answer 1

[尝试添加“边距：0自动；填充：0；”到“ .view-product”。您也可以尝试'float：right;'在“ .view-product”中