Как вариант, сделайте послойку при помощи z-index. Слайдер с изображениями, а на слое выше контейнер со статическим контентом. Здесь виден сам принцип, обратите внимание как размещен заголовок h1 тыц
Используйте margin для указания отступов между квадратами. padding - это внутренний отступ. который входит в размер элемента. Вы указали ширину и высоту ссылки 100%, вот она и разместилась на ширину всего квадарата, учитывая его паддинги. А вообще, используйте flexbox и будет вам счастье!
Решала такую проблему на 3 буте при помощи js
var minHeight = 0;
$(".offer-box").each(function () {
var height = parseInt($(this).height());
if(height > minHeight) {
minHeight = height;
};
});
$(".offer-box").height(minHeight);
