Иконки в навигационной панели не остаются встроенными

Question

Итак, я не знаю, что произошло, но внезапно мои значки изменились на вертикальные друг на друга.Вот код: Css:

    .float-right {
  float: right;
  height: inherit;
}

.icons-container {
  margin-right: 1vw;
  position: relative;
  width: 10vw;
}

.icons {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: 400;
  width: inherit;

  & a {
    color: $secondary-color;
  }
}

Html:

<div class="float-right icons-container">
      <span class="icons">
        <a href="#"><i class="flaticon-twitter-logo-button"></i></a>
        <a href="#"><i class="flaticon-github-logo"></i></a>
        <a href="#"><i class="flaticon-instagram-logo"></i></a>
      </span>

    </div>

Вот снимок экрана: Значки один поверх другого Скриншот инструментов Chrome Dev: DevTools

Answer 1

Вы можете использовать следующий код для горизонтального отображения

.icons a {
display: inline-block;
}