Ну так скройте изначально поле с результатом, всё или только значение.
Если появились значения в нужных инпутах, меняете класс, который возвращает отображение.
Я вот вижу его 8 раз в вашем коде.
Но не понятно на что вы рассчитывали, выкладывая только css. Что мы догадаемся какой у вас блок #first, а какой #two и т.д.?
Короче, это либо эффект выпадения margin, общее название "схлопывание вертикальных margin".
Либо выкладывайте код в песочницу.
Размышлять можно так:
1. Вложенный список хорошо, не нужно оправдывать лишние обертки ради заголовков, если не используете гриды.
2. С другой стороны, не так удобно делить на 5 столбцов. Но в данном случае без разницы, потому что они все равно разной ширины, если я правильно вижу.
3. Нужны ли эти ссылки большинству целевой аудитории. Я бы считала, что нет, если обратного не сказано в ТЗ. nav делать бы не стала.
Genri_Rus, еще раз медленно:
не видя макета, дивы в которые вы хотите оборачивать ссылки с заголовками вообще не нужны.
вон ниже человек привел неплохой пример
Ну отлично, человек об этом вам написал аж 18 часов назад. Зачем бы я стала это дублировать.
И да, вероятнее всего это вложенные списки. Но не зная, что это за ссылки нельзя сказать с уверенностью 100%, что они действительно являются списком.
Вложенные списки решат также и вашу проблему с обертками, если она есть.