Ankhena

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. Абсолютно-позиционированные элементы не бывают инлайн-блоками.

Написать поверх 5 div, позиционировать абсолютом.
Удобнее считать от центра.
На примере одного сектора https://jsfiddle.net/rsodt1c9/
Для top и left показала разные варианты решений.
У меня блок фиксированных размеров, можете пересчитать на %, vw/vh и т.д.

И было достаточно одного вопроса на эту тему Как нарисовать круговую секторную диаграмму на чистом css или с использыванием svg?

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

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

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

label:first-child:last-child {display: none}

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

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

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

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

Потому что использован display: inline-block; без явного указания vertical-align
Поставьте vertical-align: middle; будет хорошо

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

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

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

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

Очевидно, позиционировать его относительно body, если хотите высоту считать относительно body.
Т.е. задать body relative.

Задать align-items: flex-start
или align-self

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

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

min-content
grid-template-columns: min-content repeat(3, 1fr);
https://jsfiddle.net/y20vnap1/

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