[Помогите] Почему так нельзя???

Доброго всем времени суток! Возникла непонятная ситуация.Я учусь,поэтому прошу строго не судить. У меня есть блок в котором необходимо расположить определенным образом ряд элементов,должно быть как на картинке:
Каждый элемент у меня является li, все они соответственно закинуты в ul, а тот в свою очередь в div контейнер.
div li {display:inline-block;} выстраиваю всех в ряд,получается так:

Вопрос: из этого положения я пытался выровнять каждую по высоте примерно так div li:nth-child(5) {margin-top:75px;}
но они выравниваются всей линией, но не как не по отдельности! Почему так происходит??? Я уже выровнял все с помощью position, но хотелось бы понять почему не получилось с помощью margin-top???

 

Прошу прощения,что не выложил сразу код.

HTML:



CSS(в advatages_item указал position:relative для последующего позиционирования,изначально пытался выровнять все блоки по типу: advatages_item li{margin-top:.....;})



Как реализовано сейчас:

 

Спасибо вам большое за совет, буду пробовать.

line-height использовал для вертикального выравнивания текста внутри кружков.

На счет правильного размещения кода в разделе, учту.Спасибо.

 

Ок,попробую,спасибо!

 

Зачем вообще подкладывать картинку в background? Все это можно тоже стилями сделать.

 

Отвечая на Ваш вопрос - так нельзя, потому что когда вы задаёте свойство display:inline-block тегам LI - они воображают себя текстом и очень старательно выстраиваются в линию относительно параметра свойства vertical-align
Решение -
ul - display:block; position:relative;
li - display:block; position:absolute;
и задаёте значение top разное для каждого элемента.
Либо да, flexbox контейнер + position:relative для элементов
По-моему так корректнее всего, хотя могу и врать где-то, много лет версткой не занимался