Алексей

Оберните код в:

window.onload=function(){
// ваш код
}

Или jQuery

$( document ).ready(function() {
    // ваш код
});

Флексбоксом это не получится, вам либо логотип нужно делать с обсолютным позиционированием, либо блоки с кнопками

https://jsfiddle.net/he05hvg7/

Поместите изображение в один div, а блоки в другой и задайте каждому новому диву - display: table-cell
Хотя в ващем случае нужно задать display: table-cell блоку с #img а остальные два блока как я написал, поместить в отдельный div и задать ему тоже table-cell

а пробовали использовать еденицы vh и vw?

color: #FFF !important

Еще предложу: jsfiddle.net/1r5f9uu1

У вас вся верстка создана так, что горизонтальный скрол все равно появится... будь-то из-за картинки, надписей или header-a. Многое нужно изменить.
Да, и большое количество мониторов все еще в пределах 1280px в ширину, поэтому ваши 1340px это слишком
picone.ru/images/29-inbbhihz.jpg

почему max-width - не задать? Задавайте, а в блоке в котором она находится попишите overflow:hidden

live("keyup", function(){
 //....А дальше аякс, обновление на странице и в базе
})

плотность пикселей на всех устройствах разная - невозможно