1. Как должно выглядеть?
2. Задайте фон или обведите рамками ul и li - вам станет понятнее почему элементы стоят так, как стоят.
3. Используйте флексы. Флоаты не для этого.
4. Объем это тени.
alex1nd, разбирайтесь с высотой родителей, зачем она там указана в точках?
В верстке вообще не рекомендуется указывать фиксированную высоту. Если очень надо, то максимальную и вертикальную.
Arthaus25, есть поддержка языков, а есть поддержка расширенного набора символов. А вот где брать нормальные татарские я честно не знаю, никогда не задавалась таким вопросом.
Сделайте пример в котором видно что что-то куда-то скатилось.
Я сделала песочницу из вашего кода https://jsfiddle.net/zzanp0yb/ там есть полоса прокрутки, но все в одной строчке.
Перестаньте использовать float там, для чего он не предназначен.
Уже давно можно писать флексы.
В общем случае так: https://jsfiddle.net/0n761voc/
Дальше оформляйте и пишите media условия для перестроений на разных экранах.
Илья, У родительского дива нет ширины,потому что он absolute, значит каждое следующее слово в спане будет переносится на другую строчку. В одну строчку может поместиться несколько слов только при условии, что есть слово длиннее, чем сумма тех двух.
Но мне нужно что бы строка заполняла полностью родителя, а потом только переносилась, как обычно это и происходит.
Считайте на JS. Если тест в одну строчку помещается, то по центру, если нет, то по левому краю. Но там тоже будут сложности из-за длины слов/строк. При достаточно длинном тексте, чтобы он занимал много строк все эти нюансы перестанут быть заметными.
https://codepen.io/anon/pen/GQQozo
ширину ul или отступы li сами добавьте