Странно ведут себя иконки соцсетей

Никак не могу понять, что творится с расположением иконок соцсетей, может вы подскажете, как пофиксить? Хотелось бы, что бы они всегда были справа.


#social {
float: right;
width: 40%;
margin-right: 5%;
margin-top: 10px;
}

#social>a {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #6D68B3;
margin-left:2%;
width: 30px;
height: 30px;
float: right;
color: black;
text-align: center;
line-height: 30px;
font-size: 1.2em;
}

Почему вы игнорируете рекомендацию по поводу песочницы? Для решения проблемы предоставленной информации мало.

Я зашёл на сайт который вы рекомендовали и, если правильно понял, там платная подписка, нет?

Бесплатных функций этого сайта вам вполне хватит, чтобы оформить код.
Также можно воспользоваться песочницей и без регистрации.

Оу, извиняюсь, не заметил там бесплатных функций, сейчас гляну

Не знаю, по каким видеоурокам такая разметка составлена, но выглядит плохо.
Предполагаю, что в шапке вы хотели сделать навигацию. Вполне можно было использовать тег nav.
Теги вроде <big> и <i> сейчас редко используются (или можно сказать, что практически не используются). Также в разметке много идентификаторов, а сейчас больше принято строить все на классах.
Что касается вашего вопроса об иконках - то верстка деформируется, потому что вы не используете распорки (почитайте об этом подробнее или пройдите курс на сайте Академии - он бесплатный). Старайтесь не указывать ширину явно. Позвольте ей изменяться в зависимости от содержимого.
И пожалуйста, не создавайте на каждый вопрос отдельную тему, продолжайте обсуждение в уже созданной ранее.

Оба раза делал по гайдам с этого канала) https://www.youtube.com/channel/UCvuY904el7JvBlPbdqbfguw