Бордер. Изменения
Как сделать прямоугольный бордер, у которого был бы пробел сверху по центру?

Всё очень просто: поднимаете Заголовок, задаёте ему задний фон, боковые внутренние отступы для отступа от полос, и готово.
Есть минус в том, что если заголовок длинный и вдруг захочет встать в две строчки, тогда центрирование заголовка к полоскам собьётся. Но можно либо сделать высоту заголовка, рассчитанную на две строки, либо задать заголовку max-width-90%, например, и дать ему text-overflow: ellipsis что, конечно, не очень хорошо для SEO.
.wrapper-for-border {
border: 1px solid black;
padding: 20px;
margin-top: 20px;
}
h1, p {
text-align: center;
}
h1 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
padding: 0 20px;
background-color: white;
display: block;
width: fit-content;
background-color: white;
margin: -35px auto 0;
}
<div class="wrapper-for-border">
<h1>About Us</h1>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letras</p>
</div>