Почему обрезаются стили нижнего колонтитула?

Question

В нижнем колонтитуле у меня есть ссылки на социальные сети, оформленные в виде кругов: https://milfordpa.us

Все выглядит хорошо на Chrome, но в Safari последний один кажется "отрезанным", и я не могу понять почему.

Вот мой текущий S CSS:

  .social-links {
    display: block;
    float: right!important;
    a {
      border-radius: 50%;
      padding: 10px 11px;
      font-size: 20px;
      background: $color3;
      color: $color2;
      margin-left: 5px;
      &:hover {
        background: $color4;
        color: $color2!important;
      }
    }
    i {
      width: 21px!important;
      height: 20px!important;
      text-align: center;
    }
  }

Заранее благодарю вас за вашу помощь !

Answer 1

В одном из ваших родительских элементов для .social-link вы меняете ширину на то, с чем, похоже, сафари борется.

Быстрое исправление - повторно применить ширину к .social-link

.social-link {
    text-align: right;
    min-width: -webkit-fill-available;
}