Вадим Белкин

Фон смещайте через background-position, логотип же можете двигать либо через padding у родителя, либо через margin, transform: translate или top/left у самого логотипа

Нет возможности так кастомизировать дефолтный скролл, сделать ширину скроллбара больше ширины его контейнера, ширина скролл бара всегда равна размеру контейнера.
По картинке не понятно где реальные границы контейнера, за которыми скрывается контент. Можно было бы те боковые отступы от краев скроллбара до краев внутреннего блока сделать паддингами самого контейнера со скроллом либо паддингами доп.обертке внутреннего блока, пример

Если веририть данной доке calc(), то в FF обрабатывает так как у них описано в заметках про таблицы

Note: Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.

В предыдущем вопросе вам написал, что тут странное поведение в хроме. Почему-то в хроме не получается задать дробные значения для табличных ячеек, он округляет до целых. Ради примера, создайте блок высотой 205.5px и таблицу с одной ячейкой той же высоты - хром округлит до целого высоты таблицы. Хоть вы и делаете на дивах, но имитируете таблицу через table/table-cell по этому будет тот же результат

Сам мучался с этой проблемой. На iOS клавиатура никак не влияет на размер окна и вьюпорт. Она просто открывается поверх окна и страницу при этом может как бы проскроллить вверх если место куда вводится текст находится в том месте где появится клавиатура. Причем скроллится на страница (html, body теги), а фиг знает что, т.к. событие скролла не отлавливалось.
Пришлось выкручиваться так, я отлавливал событие фокус на полях ввода (вообще на всем что вызывает открытие клавиатуры), и по setTimeout в 500ms (клавиатура появлялась плавно и можно было правильно вычислить её размер только после открытия) выполнял следующее

const innerHeight = window.innerHeight;
document.body.style.height = innerHeight + 'px';
document.documentElement.style.height = innerHeight + 'px';
window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил

решение не вау, и еще таймаут подводит если вдруг интерфейс тормознет и клавиатура появится с чуть большей задержкой, но другого к сожалению не придумал

Ну и соответственно при закрытии клавиатуры (blur того же поля) нужно примененные стили сбрасывать

document.body.style.height = '';
document.documentElement.style.height = '';

Можно подробнее про требования, для чего и как это будет использоваться?
Мне пока на ум пришла идея только с распоркой в виде картинки с нужными пропорциями, минимального размера и максимально ужатого качества, например белые jpg/png размерами 16x9px и 4x3px которые по высоте 100% и с автоматической шириной и сделанные невидимыми, а самим блокам задаем высоту и делаем их инлайн блоками. Задав фиксированную высоту блоку картинка находящаяся внутри растягивается на всю высоту блока и её ширина увеличивается пропорционально, растягивая сам блок по ширине на пропорции картинки. Плюс внутри можно создать доп.блок для размещения контента растянув и отпозиционировав его поверх всего.
Пример

Могли бы вы приложить скриншот? У меня ваш пример отображается нормально. Вы же про круг чекнутой радиокнопки? Неровное выравнивание может быть из-за того что сам символ круга имеет нечетные размеры, а контейнер относительно которого он выравнивает - четные. Отсюда и смещение в 1 пиксель. Символ который вы используете в чекнутой радиокнопке размером не 30px, 30 - это размер текста, а размер данного символа меньше, фактический размер этого символа как раз и может быть нечетным

Пример. Подобный результат нужен?
1. Создаете адаптивную сетку
2. Для картинок добавляете обертку с трюком для пропорциональных размеров через вертикальный padding и располагаете картинку внутри такого блока

Если нужно именно средствами html для таблиц, то для выравнивания по вертикали в таблицах есть атрибут valign (смотрите поддержку). Это чисто html'ный способ.
Но можно добавить инлайн стили к тегу ячейки vertical-align: middle, отчасти тоже с помощью html :-D, т.к. не нужно подключать стили и делать выборку элемента селекторами

Сам аналогов не встречал ещё, да и не искал. Но сам до использования browserStack тестировал на iOS симуляторе в виртуальной машине OSX и android в Android SDK. Не лучшие варианты, но если ресурсы компа позволяют и как бесплатные варианты.

а у .question position задан?

Стандартными средствами bootstrap никак. По-любому придётся свои стили дописывать.

Пример структуры и размещение блока изображения и текста. Способов подобного размещения много, применяйте знания CSS. Данные изображения можете сделать спрайтовыми иконками, конвертировать в шрифтовые иконки и т.п. Так же никто не запрещает вставлять их обычными img. Как удобно вам.