Сместились иконки

Question

В среднем и левом столбцах иконки должны отображаться как в правом,но ничего не получается, хотя CSS-стили для правого столбца работают верно а для остальных 2-х - нет https://wampi.ru/image/Rc202

.features {
  display: flex;
}

.features_item {
  flex: 1 1 0;
  padding-left: 90px;
  position: relative;
}

.features_icon {
  position: absolute;
  top: -26px;
  left: -49px;
  z-index: 1;
}

.features_title {
  font-size: 23px;
  color: #f6950a;
  text-transform: uppercase;
}

.features_text {
  font-size: 18px;
  color: black;
}

<div class="features">
  <div class="features_item">
    <img class="features_icon" src="assets/image/features/vader.png">
    <div class="features_title">key characters</div>
    <div class="features_text">On our site you can read something interesting about key characters from different universes.</div>
  </div>
  <div class="features_item">
    <div class="features_item">
      <img class="features_icon"src="assets/image/features/bobar.png">
      <div class="features_title">secondary characters</div>
      <div class="features_text">You also can find here information about secondary characters.</div>
    </div>
  </div>
  <div class="features_item">
    <div class="features_item">
      <img class="features_icon" src="assets/image/features/storm.png">
      <div class="features_title">the characters of the third plan</div>
      <div class="features_text">Also we provide knowledges about guys of background.</div>
    </div>
  </div>
</div>

zk

Answer 1

Дело в том, что у вас, скорее всего, третья картинка больше по размеру чем первые 2. А так как вы не задали размеры картинок с тилях, то они отображаются в полном размере. Если хотите чтоб картинки были одинакового размера, задайте его в стилях, например:

.features_item img{ width: 100px; }

БЛОГ НА HUSL

Сместились иконки

Ответы (1 шт):