проблемы с их раскладка

я пытаюсь построить макет с помощью css, где все размеры указаны в них. я был под впечатлением, что это позволит страницы, которая должна отображаться таким же образом, по-разному размеры шрифта уровней/зум. однако, я заметил, что текст переносится по-разному размера/изменения масштаба.

this jsfiddle

например , текст отображается одной строкой в моей родной зум и размер шрифта 1эм, но обертывания с размером шрифта 2ем. я бы ожидать, что это либо обертывание/обертывание не последовательно, так как ширина контейнера в них, и поэтому следует увеличить пропорционально размер шрифта.

я что-то делаю неправильно, или я просто неправильно понял, что измерения они являются полезными для?