img не центрируется в мобильной версии

.page {
  margin-top: 90px;
}


/* медиа запросы  .page _______->*/

@media (max-width: 767.98px) {
  .page {
    padding: 30px 0px 0px 0px;
  }
}


/* медиа запросы  .page _______->*/

.hello {
  width: 856px;
  margin: 0 auto;
  padding: 38px 0px 70px 0px;
}


/* медиа запросы  .hello _______->*/

@media (max-width: 868px) {
  .hello {
    padding: 38px 0px 0px 0px;
  }
}


/* медиа запросы  .hello _______->*/

.hello__container {
  display: flex;
}


/* медиа запросы  .hello__container _______->*/

@media (max-width: 767.98px) {
  .hello__container {
    flex-direction: column-reverse;
    text-align: center;
  }
}


/* медиа запросы  .hello__container _______->*/

.hello__content {
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 18px 110px 0px 0px;
}


/* медиа запросы  .hello__content _______->*/

@media (max-width: 868px) {
  .hello__content {
    padding: 18px 50px 0px 0px;
  }
}

@media (max-width: 767.98px) {
  .hello__content {
    padding: 40px 0px 00px 0px;
  }
}


/* медиа запросы  .hello__content _______->*/

.hello__title {
  font-size: 44px;
  line-height: calc(60 / 44 * 100%);
  font-weight: 700;
  margin-bottom: 25px;
  margin-top: 18px;
}

.hello__text {
  font-size: 16px;
  font-family: Heebo;
  line-height: (23/16 * 100%);
  margin-bottom: 35px;
}


/* что бы убрать нижний отступ у всех полседних элементов*/

*:last-child {
  margin-bottom: 0px;
}

.hello__btn {
  background-color: #ff6464;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px 20px;
  display: inline-flex;
  height: 47px;
  font-size: 20px;
  font-weight: 500;
  line-height: calc(29 / 20 * 100%);
  /*145% */
  transition: background-color 0.3s ease 0s;
  text-decoration: none;
  color: #fff;
  font-family: Heebo;
}


/* медиа запросы  .hello__btn:hover _______->*/

@media (min-width: 992px) {
  .hello__btn:hover {
    background-color: #9f6161;
  }
}


/* медиа запросы  .hello__btn:hover _______->*/

.hello__avatar {
  flex: 0 0 243px;
  height: 243px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: -5px 13px 0px 0px #edf7fa;
}


/* медиа запросы  .hello__avatar _______->*/

@media (max-width: 767.98px) {
  .hello__avatar {
    width: 170px;
    height: 170px;
  }
}


/* медиа запросы  .hello__avatar _______->*/

.hello__avatar>img {
  max-width: 100%;
}

<main class="page">

  <div class="hello">
    <!-- Ограничивающий контайнер-->
    <div class="hello__container _container">

      <div class="hello__content">
        <h1 class="hello__title title">
          Hi, I am John,<br /> Creative Technologist
        </h1>

        <div class="hello__text text">
          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
        </div>
        <a href="#" class="hello__btn btn">Download Resume</a>

      </div>

      <div class="hello__avatar">
        <img src="./src/img/IMG_0051.PNG" alt="avatar" />
      </div>

    </div>

  </div>
</main>