Ankhena

Лучше всего - задать класс.
Если религия не позволяет этого сделать, то не отменять подчеркивание, а задавать только нужным.
Т.е. всем ссылкам, кроме тех, что лежат в последнем li.

.item-footer li:not(:last-child) a {этим задать подчеркивание}

P.S. Картинки внутри этих ссылок не являются контентными, им нужно либо задавать aria-hidden либо делать их фоном/псевдоэлеменом. Тогда у каждого li или ссылки будет свой класс (а это отлично) и вообще не будет проблемы с nth-child.
Span вообще лишний, зачем он вам?

Я же вам в прошлый раз еще написала: для текста поворот на обратный угол.
https://jsfiddle.net/r5dfbuzm/

Либо "фон" делайте псевдоэлементом и наклоняйте его.
https://jsfiddle.net/yuzskp6h/

Градиентом: https://jsfiddle.net/6wvjqahL/

prevArrow: '<button type="button" class="prev">кнопка</button>',
nextArrow: '<button type="button" class="next">другая</button>',

Задавайте высоту обертке, а не самому блоку https://jsfiddle.net/06bsvwhL/

Если прекратить использовать флоаты для того, для чего они не предназначены, то всё ведь прекрасно будет работать.
https://jsfiddle.net/bxefyc38/
Отступы так, для видимости, в ширину и другие параметры флексов можете сами играть.

P.S. С флоатами, кстати, тоже будет работать, только высота у детей должна быть одинаковой для нормального вида.
Поэтому не ясно, что у вас не получалось.
Но так (флоатами) делать не надо.

P.P.S. Абсолютно-позиционированные элементы не бывают инлайн-блоками.

нужно ли каждый круг задавать дивами(40 штук)

То что вы пишете в разметке это контент. Эти точечки ни разу не контент.
Если вам охота писать пустые блоки, то с большой долей вероятности вы пишете г-код.

Вы можете делать эти точечки повторяющимся фоном из радиальных градиентов.
Можно для псевдоэлемента, чтобы было удобнее позиционировать.
https://jsfiddle.net/j68ra1fq/

Но последний, нижний блок, который оранжевый, нужно чтобы был на всю ширину экрана, внутри будет контент, но по бокам до конца окна браузера мне нужно продолжение цвета блока.

Ну так выньте его из родительского. Что мешает?

Задайте обертку на всю ширину окна и оранжевым фоном. В неё вложите контейнер с контентом, ограниченной шириной и margin auto.

Статейка с примерами

Потому что float частично выводит элементы из потока и его родитель перестает что-либо знать о высоте флоатов.

какие варианты решение существуют?

Перестать использовать флоаты для того, для чего они не предназначены.
Но использовать флексы и гриды.

ul {display:flex} решит вашу задачу.
Остальные свойства смотрите в справочнике/спецификации и используйте по мере необходимости.

Потому что 210px + 65% при разной ширине окна дадут разный результат. Где-то псевдо не дотянет до конца родителя, а где-то вылезет.

Просто используйте флексы для h2 вместо абсолюта для псевдо.
https://jsfiddle.net/5c1punm4/

Так задайте отступ на размер тени.

Как-то так https://jsfiddle.net/oyz0jhLr/

Также как и картинки любого другого размера.
Теги figure и figcaption придуманы как раз для этого.

Для расположения блоков в ряд очень удобно использовать display flex.

Не очень понятно, что вы имеете в виду.

Каждой секции можно задать свое изображение.

Также можно задать несколько фонов для одного блока.
Они пишутся через запятую.
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Поскольку эти цифры не подходят для тега sup, то это просто span сдвинутый наверх любым из способов
- position relative
- margin
- transform

Используйте css columns
https://jsfiddle.net/ezxpw42o/
Либо grid
Либо скрипты типа masonry