Георгий Еремеев

Перенос на новую строку в коде inline элементов действует как пробел. Убери все переносы в коде и пропадут отступы.

flex order
https://jsfiddle.net/j38rptgh/3/

Почему?

Потому, что к ячейкам таблицы применять margin нету смысла. Отступы между ячейками устанавливается через border-spacing.

И как выровнять текст из не фиксированного кол-ва строк в родителе с фиксированной высотой?

По мимо вашего метода выравнивая я знаю еще два.
1. Flexbox (рекомендую).
2. А второй лучше покажу https://jsfiddle.net/k2qrtgbj/

https://jsfiddle.net/h3dqx79s/1/ как тебе такой вариант?

Создать блок с position: fixed, в него поместить блок со стилями ширины и позиции по горизонтали как у .center + добавить position: relative;, и уже в нем разместить .banner с position: absolute;

https://jsfiddle.net/3y361s18/3/

$('.popupicon').on('click', function(e){ e.stopPropagation() })

%body
    %header
        .container

Обычно так все делают

@my-width: 500px;
div{
    width: @my-width;
    div{
        width: @my-width * .7;
    }
}

photoswipe.com