Почему значки нижнего колонтитула в социальных сетях не отображаются при просмотре на экране шириной 1440 пикселей?

Question

Я использую инструменты разработчика в Chrome и выбираю опцию Laptop L, ширина которой составляет 1440 пикселей.

Проблема видна на изображении ниже:

Значит, значки Twitter и Instagram обрезаются справа от экрана.

Далее, когда я пытаюсь переместить значки влево для медиазапроса шириной 1440 пикселей, значки полностью обрезаются. Вы можете видеть на изображении выше, что значок facebook слева немного обрезан.

Код, окружающий значки нижнего колонтитула:

@media screen and (max-width:1440px) {
  #footer-icons{
    position:relative;
    left:10%;
  }
}

Весь мой код можно увидеть здесь:

https://codepen.io/JoyFulCoding/pen/EzXowL

Я изо всех сил пытаюсь определить, где проблема, поэтому любая помощь приветствуется. Как расположить три значка таким образом, чтобы их можно было видеть в правом нижнем углу при просмотре на экране шириной 1440 пикселей?

Answer 1

Относительное позиционирование лучше всего использовать только для небольших настроек положения. Если вы хотите выровнять этот элемент по правому краю, просто дайте ему margin-left:auto.

Чтобы пояснить далее, это правило даже не действует, поскольку его специфика ниже, чем правило "footer # footer-icons". Подробнее о специфике селектора CSS .