метод 1 с использованием полей

Добавьте margin-top:0 в CSS вашего hr и margin-bottom:0 в CSS About.

hr {
  margin-top: 0;
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
}

span {
  margin-bottom: 0;
}

<span>About</span>
<hr>

метод 2 с использованием абсолютного позиционирования

hr {
  position: absolute;
  top: 10px;
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
}

.container {
  position: relative;
  outline: 1px solid;
}

<div class = "container">
  <span>About</span>
  <hr>
</div>

Вы пробовали убрать поле О тексте? Или измените высоту строки текста «О программе».

Вы можете сделать маржу равной 0. Может быть, это сработает.

h1{
  margin-bottom: 0;
}
hr{
  margin-top: 0;
}

Вы можете нарисовать правило с помощью CSS вместо <hr>. У вас будет больше контроля над его внешним видом и положением, а ваш html будет более чистым и семантически правильным.

nav a {
  display: inline-block;
}

nav a::after {
  content: '';
  display: block;
  height: 2px;
  width: 150%; /* relative to the text */
  border-radius: 2px;
  background: red;
  margin-top: 2px; /* adjust to control vertical distance from the text */
}

<nav>
  <a>About</a>
</nav>

Пространство, которое вы хотите контролировать, — это всего лишь граница.

hr.hrabt { 
 margin: 0.1em auto;
}

В качестве альтернативы я бы рекомендовал полностью отказаться от горизонтального правила и просто добавить границу к вашим заголовкам.

h1 {
  border-bottom: 0.1em solid #000;
}