Ankhena

Не знаю, почему у вас не работает nowrap
https://jsfiddle.net/hnrgt3eL/

Проблемы могут возникнуть с конечной шириной таблицы

2 блока переменных.
В первом сами цвета.

@brand-color
@accent-color
@inverse-color

возможно и с названием цветов, например, зеленый и светло-зеленый: green и light-green (такое бывает, когда цветов в макете много)

Во втором блоке уже цвета по назначению

@text-color: #999
@menu-color: @brand-color
@link-color: @accent-color
@hr-color: @inverse-color

Вот так: inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html

input и его абсолютно позиционированный label и все это обернуто в div.
Либо снаружи label, а внутри span.
Писать "email adress ..." в псевдоэлемент не целесообразно.

Типа того: https://jsfiddle.net/m7hcbdrj/ цвета, отступы измените, как вам надо

1. Первые ячейки пустых строк заполнить  .
2. Узнавать на js высоту заполненной и задавать всем.
3.

td::after {
  content: "";
  display: inline-block;
  width: 1px;
  background: green;
  min-height: 1em;
}

1. Фон бывает множественным, фоны пишутся через запятую, последний самый нижний. Цвет пишется к нижнему фону.
Совершенно незачем городить несколько блоков ради этого.

2. Что мешает объединить в одну картинку 2 слоя?

Большего без макета не сказать.

Ну а ошиблись:
1. Фон header'a нужно задавать header'у, а не куче блоков.
2. Кроме позиционирования блоков есть позиционирование непосредственно фонового изображения background-position.
3. position: absolute для .img будет позиционировать блок относительно body, а у вас речь вроде про вертску header
4. .main внутри header выглядит странновато.
5. header display:flex чтобы что?
6. position: relative у .img-two чтобы что?
7. top: 0 и margin-top: 83px - почему не написать в 1 строчку top:83px

Позавчера делала для соседнего вопроса https://jsfiddle.net/Ankhena/bec9qcyy/
Вам только углы поменять.

Вот так: https://codepen.io/anon/pen/VQGRLg