bazliiii

Это происходит из-за того, что investing имеет position: relative (чтобы разобраться, гуглите "css контекст наложения").
Если бы у нег был position static, то блок exits просто наполз бы сверху, как и предполагалось.

Как починить?
1. (так себе вариант) Задать relative и для exits.
2. (получше) Перевесить relative на investing__inner
2. (ещё получше, люблю когда разметка почище). Убрать relative у investing. Удалить investing__line из разметки. Заменить на фон градиентом.

Это "Удалить investing__line из разметки" имеет смысл сделать в любом случае. Если не хочется градиентом, то по крайней мере заменить на псевдоэлемент.

Можете добавить класс для самого блока слайдера, и через него меня стили точек.
Например
class="slider red-dots"
class="slider"
.slider .dots { стили обычных точек }
.slider.red-dots .dots { стили красных точек }

Вариант 1 - float: right;.
Вариант 2 - flex.
Вариант 3 - grid.
Вариант 4 - position: absolute/fixed.

Ну либо в Внешний вид -> Меню в верхнем правом углу открыть Настройки экрана, включить классы CSS и прописать нужные пунктам, либо подобрать фильтр.
Например, попробовать так

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class($classes, $item){
    $classes[] = 'your-custom-class';
    return $classes;
}

Видео с примерами.

можно обернуть всё в контейнер, у которого использовать псевдокласс :focus-within , примерно так: https://jsfiddle.net/j1oy8Ls3/2/