Talim40k

Возможные варианты решения:
1. Задать overflow: hidden для элемента сквозь который проходит margin (чтобы убрать это прохождение).
2. Указать margin-bottom впередиидущему элементу (вместо margin-top текущему). Не забываем про схлопывание вертикальных margin.
3. Использовать padding-top для контейнера внутри которого находится элемент.
4. При использовании "position: relative" дать нижний margin на размер сдвига, у родителя при этом должен быть "overflow: hidden". Или вместо этого использовать padding-bottom родителя на размер сдвига (т.е. 20px в вашем случае).

Попробуйте задать стили так:

.header-bottom__progress {
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
	background-color: #E0E0E0;
}
.header-bottom__progress::-webkit-progress-bar {
	background-color: #E0E0E0;
}
.header-bottom__progress::-webkit-progress-value {
	background-color: #98E2FF;
}
.header-bottom__progress::-moz-progress-bar {
	background-color: #98E2FF;
}

Работает. По умолчанию justify-content равен flex-start, вот элемент hi__body и находится с левого края. Для того чтобы действие "flex-direction: row" было заметней, нужно задать другое значение для justify-content (center например) или добавить еще один элемент (или несколько) по соседству с hi__body. Прошу прощения если неправильно понял проблему.