Css 如何使图像居中而不在较小的屏幕上创建水平滚动？

我正努力使自己的形象居中。我尝试了“left:50%”，这很管用，但它通过添加一个水平滚动条改变了页面在较小屏幕上的外观，这确实打乱了整个页面的外观（顶部和底部的div容器没有填满页面的宽度）

有没有一种简单的方法可以使它居中，而不会在较小的屏幕上出现这种水平滚动

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -o-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -moz-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #790c5a 60%);
padding-top: 5px;
padding-bottom: 30px;
text-align: center;
position: relative;
z-index: 1;
margin: auto;
width: 100vw;

}

.top-container:before {
       content: "";
       background: url("http://www.transparenttextures.com/patterns/cubes.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.9;
       width: 100vw;
       height: 100%;
       z-index: -1;
}

nav {
  height: 5vh;
  background: #cc0e74;
  margin-top: -20px;
  width: 100vw;
}

.photo-holder {
  position: relative;
  top: 100%;
  transform: translate(-50%, -50%) rotate(120deg);
  width: 900px;
  height: 400px;
  max-height: 900px;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 300px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.photo-holder-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-60deg);
  overflow: hidden;
  background: transparent;
}

.photo-holder-inner-in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-60deg);
  overflow: hidden;
  background-image: url("./../images/me-skye.JPG");
  background-size: contain;
  filter:hue-rotate(-75deg);
  border:1px solid #a37eba;
}

我可能忽略了一些非常简单的事情，但我被卡住了，所以任何帮助都将不胜感激

添加

overflow-x: hidden;

在要将图像或全身标记居中的div中。它将删除水平滚动条。

添加

overflow-x: hidden;

---

在要将图像或全身标记居中的div中。它将删除水平滚动条。

尝试在根元素上设置框大小：边框框，如在html、正文或：根选择器中。添加html代码抱歉-您的意思是我也应该将html代码上载到此处吗？尝试在根元素上设置框大小：边框框，如在html中，body或：root selector.AddHTML代码抱歉-你是说我也应该将HTML代码上传到这里？