Грустно и печально, но эта проблема до сих пор не решена. Вручную записывая куда нибудь какие куски используются на странице, потом так же для следующей. Автоматизация есть, но она довольно глупая и обычно вообще портит верстку.
Почему не работает? Все работает. Ты задала 100vw + 10% вот блоки и расширились, у нижнего 100vw + 5%, по этому он меньше первого. Чтобы паддинги не выходили за пределы ширины или высоты блока, нужно задавать ему box-sizing: border-box;
Последняя версия ios на iphone4 7.2. Bottstrap 4 сделан на flexbox. Полноценная поддержка flexbox начинается с версии ios 9.2 (с версии 5, но с префиксами и танцами). В вопросе нужно указывать, что за технологии используешь, кто отвечает должен все комменты посмотреть, прежде чем ответить? А ещё лучше посмотреть поддержку на mdn или на аналогичных ресурсах.
Если дизайнер просто офигенный и положил с макетом style guide, то можно буквально все из него вносить в переменные и миксинить. А так на свое усмотрение.
