Как центрировать изображение, не создавая горизонтальную прокрутку на меньшем экране?

Я пытаюсь центрировать свое изображение. Я попробовал '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;
}

Я, вероятно, упустил из виду что-то действительно простое, но я очень застрял, поэтому любая помощь будет очень признательна!