Ankhena

Не задавайте ему ширину вовсе или задавайте минимальную/максимальную
https://jsfiddle.net/n17Lxj8z/

Варинтов много.

1. Псевдоэлемент для родителя и абсолютное позиционирование https://jsfiddle.net/h21jnfxu/
2. Псевдоэлемент для родителя и order для псевдоэлемента.
3. Псевдоэлемент для дочернего (любого), ему абсолют и relative блоку
4. Псевдоэлемент для дочернего (любого), ему абсолют и relative основному контейнеру
5. Фон для контейнера.

Выбор варианта зависит от макета и его судьбы при адаптации.

transform: rotate(90deg); контейнеру

Если это не контент, то псевдо.
Если контент, то соответствующий тег, не знаю, что у вас, p, h1, span...

Задавайте фоновый цвет в формате rgba, вместо прозрачности всего блока.
https://jsfiddle.net/7xjgb0w1/

p.s. у вас дикая вложенность, обычно 2х уровней достаточно.

body main .footer .slide .img-1 .hover-block a span

это жесть, используйте классы
вряд ли существует main, который не лежит в body и т.д.

Суть такая: https://jsfiddle.net/hv43ncm9/

Ну или так https://jsfiddle.net/bykexvn1/

Один родитель, 3 ребенка.
У ребенка внутри картинка и текст.
C помощью nth-child и order менять расположение картинки.

У вас стоит background-size: cover.
Нужно изменить на то, что вам нужно. Вероятно в px или % или вообще без указания bg size

Прокатит ли позиционирование абсолютом с процентами?

Прокатит.
Только от середины считайте.

Вариантов полно разных
Можно считать nth-child и ставить/убирать отступы https://codepen.io/anon/pen/KLMxyO (calc у меня там в развернутом виде, нужно сократить).
Можно имитировать отступы с помощью border или box-shadow.
Можно использовать padding вместо margin и, возможно, доп обертку внутри итемов.
Можно сделать доп контейнер и задать отрицательный margin для компенсации "выпирающих" margin у итемов.
Можно приплести js.

Вам нужно:
(наверное)

background-position: center bottom; 
background-size: cover;

И плюс отрезать от самой картинки лишние верхние и нижние поля либо компенсировать их через bg position. Но поскольку вы хотите адаптив, то проще отрезать, чем считать проценты.

Еще, опять таки, потому что вы хотите адаптив, нужно сделать несколько картинок и менять их через @media, чтобы не грузить на мобилках 4к картинку.

Для таких случаев добавляют еще несколько (сколько зависит от того сколько элементов может не хватать до целой строки) пустых элементов с нулевой высотой.
Если таких элементов нужно добавить всего 1 или 2, как в вашем случае, то можно обойтись псевдоэлементами.

https://jsfiddle.net/mdeoxjb6/

Потому что в шапке флоаты без clearfix.
Для наглядности: https://jsfiddle.net/w865Lm09/ видите блок со ссылками выпирает? Вот он и мешает. Всего на 1px, а какой эффект.

Такие вещи делают флексами:
https://jsfiddle.net/n178eh32/

На чистом CSS, без JS https://jsfiddle.net/b31Lr7fk/
Вместо цветов поставьте свои картинки.

https://codepen.io/anon/pen/XwWpPY

В процентах относительно общей обертки. Без js.

Например, для p display:flex
Или float для before если нужно обтекание
Или абсолют для before,а для p padding
Или еще что-нибудь

Это было сделано для другого вопроса, но вам аналогично, только без hover

или

https://jsfiddle.net/e14x0pvy/
Либо SVG

.d1 {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
}

.d2 {
  border-bottom: 1px solid red;
  transform: rotate(-30deg);
}

.d3 {
  border-bottom: 1px solid red;
  transform: skew(0, -30deg);
}