В твоем примере блок переносится при разрешении 1200, т.к. у тебя стоит класс .container и его ширина становится 930px. Поставь класс .contanier-fluid - он будет занимать всю ширину окна, а дальше уже выставляй блоки как нужно
Box-sizing только для .promo__main.
Если ты зайдешь в панель разработчика то увидишь что только этот элемент занимает пустое пространство справа, из-за padding размер блока увеличивается и появляется полоса прокрутки. Если ты хочешь задавать padding или border, и вместе с тем что бы размер блока оставался прежним, то добавь к нему свойство box-sizing: border-box;
А по поводу width: 100%, то не правильно указывать размеры в процентах элементу у которого родитель сам указан в процентах, не имея явных размеров. А т.к. у тебя этот элемент (.promo__main) блочный, он и так займет всю ширину и указывать ее нет необходимости. https://webref.ru/css/width - про width и border-box
Без кода сложно что то сказать, если с фикс. шириной тоже не вариант, можешь попробовать костыль - сделать span инлайн блочным и задать overflow: visible. Части буквы не будут срезаны краями span
Написано
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.