Сергей

ты бы хоть снимок экрана приложил...

Срабатывает "схлопывание"
тык сюда

а чем тебя не устраивает бутстраповский класс .p-0 ?

Что тебя смущает? Всё содержимое в тэге а ,будет ссылкой...

потому что у тебя дичайшая каша в стилях

размести DIV с градиентной заливкой под фото...

В инспекторе кода смотрю какие стили применены к твоему .ellipse-group
Я проверил твою разметку со стилями, всё отображается, высота .ellipse-group 353px

Из твоего вопроса непонятно как происходит загрузка картинок, но может стоит использовать прелоадер картинок, а потом отображать слайдер.
Короче, тут нет внуков Ванги....

в css свойствах градиента используй rgba цвета, например rgba(255,255,255,0.5) - белый с прозпачностью 50%

Добавь к каждому классу display: block;

Для начала не используй у дива margin-left и margin-right для центрирования, используй margin: 0 auto; - это отступ 0 пикселей сверху и центрирование по горизонтали. Есть и другие способы отцентровать, гугли "центрирование блока по горизонтали" (обрати внимание на flex).
Далее div у тебя никак не привязан к размерам экрана, а значит не будет изменяться. Нужно изменять его размеры или в медиазапросах (прогугли это), или задать ширину/высоту в процентах (а также посмотри единицы измерения em и rem)? например div { width: 50%;}
Для своего дива создай отдельный класс, а не привязку к конкретно к div.
Чтобы картинка тоже масштабировалась, я бы сделал ее также в виде div с указанием картинки в качестве фона (гугли свойство background: url('путь до картинки'); а также backgroung-size и background-position)

Копай в сторону background-position и background-position fixed