Андрей

<h1>Хьюстон</h1>
т.е. проблема </h1>

Заменить на

label:after {
    content: '';
    position: absolute;
    font-size: 25px;
    border-color: red;
    border-style: solid;
    border-width: 0 0.35em 0.35em 0;
    height: 1em;
    top: 2px;
    left: 12px;
    transform: rotate(45deg);
    width: 0.7em;  
}

border-radius: 5px; - закруглит углы. но на картинке они похоже на ровные. поэтому не указал

body {
    background-attachment: fixed;         /* фиксированый фон */
    background-repeat: no-repeat;         /* без повторений */
    background-position: 50% 50%;         /* позиционируем */
    background-size: cover;               /* масштабируем */
}

..экспериментируйте

Как один их вариантов
предлагаю это убрать

.features__item:not(:first-child) {
    border-left: 2px solid #003a7d;
}

и сделать вот так:

.features__item {
	position: relative;
}
.features__item:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 0;
	left: -1px;
	border-left: 2px solid #003a7d;
	height: calc(100% - 40px);
}
.features__item:nth-child(odd)::before{
	top: 40px;
}

или

.features__item {
  position: relative;
}
.features__item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 40px;
  left: -1px;
  border-left: 2px solid #003a7d;
}
.features__item:nth-child(odd)::before{
  top: 40px;
  bottom: 0;
}

или ...

У вас стили подключены для 5 версии, а в разметке прописано для 4
для того чтобы отображались нужно так:
<i class="fab fa-facebook"></i> - кругленькая
<i class="fab fa-facebook-f"></i> - с прозрачным фоном
<i class="fab fa-facebook-square"></i> - квадратная
<i class="fab fa-facebook-messenger"></i> - доп.
подробнее по брендам здесь
по использованию подробнее здесь