Как позиционировать картинки как на фото?

В идеале так это должно выглядеть:

Результат получается таким:

В чем проблема?

HTML

<div class="devises">
    <div class="devices__items">
      <img class="devices__item" src="img/display_bg_768x1024.jpg" alt="">
      <img class="devices__item devices__item--iphone" src="img/White.png" alt="">
    </div>
  </div>

CSS

.design {
  background:url(../img/2-layers.jpg) center no-repeat;
  padding-top: 101px;
  background-size: cover;
}

.devises {
  max-width: 636px;
  width: 100%;
  margin: 0 auto;
    &__items {
      position: relative;
  }
    &__item {
      display: block;
    }
    &__item--iphone {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }
}