syntaxorange

function clickBtn() {
    var $btn = $('.programm__list-item__btn');
    var $sublist = $('.programm__list-item__sublist');

    $btn.click(function(event) {
        var $target = $(event.currentTarget);
        var $dropdown = $target.next();

        $btn.not($target).toggleClass('active', false);
        $sublist.not($dropdown).toggleClass('active', false);
        $target.toggleClass('active', true);
        $dropdown.toggleClass('active', true);
    });
};

clickBtn();

Лучше используйте псевдоэлемент `::after` на селекторе `.header`

.header {
    position: relative;
    border-bottom: 4px solid transparent;
}

.header::after {
    position: absolute;
    z-index: 1;
    left: 2.5%;
    bottom: -4px;
    width: 95%;
    height: 4px;
    content: '';
    background-color: #f00;
}

Вы позиционируете родительский контейнер, который растянут на всю ширину страницы. Разумется после сдвигов с одинковыми величинами он возвращается на своё исходное положение. Задайте родителю тоже блочно-строчный бокс, чтобы его ширина зависела от размера потомков.