Как сделать отступ от родительского блока при display: inline-block?

Question

zkk777 @zkk777

HTML
CSS

Как сделать отступ от родительского блока при display: inline-block?

Пытаюсь сделать таймлайн для футбольного матча, отступы всегда получаются динамичными в зависимости от минуты когда событие произошло. И из-за того что display: inline-block стоит, margin-left происходит не от родительского блока, а от предыдущего, пытался математический решить эту проблему путем отнятия предыдущего отступа, но выходит не верный результат. Прошу помочь с этим вопросом!

<div class="time_events">
<div class="event_ycard" style="position: absolute;margin-top: -27px; margin-left: 4.4444444444444%;"></div>
<div class="event_goal" style="position: absolute;margin-top: -17px; margin-left: 5.5555555555556%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -17px; margin-left: 14.444444444444%;"></div>
<div class="event_ycard" style="position: absolute;margin-top: -17px; margin-left: 14.444444444444%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -27px; margin-left: 20%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -27px; margin-left: 23.333333333333%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -17px; margin-left: 26.666666666667%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -27px; margin-left: 31.111111111111%;"></div>
<div class="event_goal" style="position: absolute;margin-top: -27px; margin-left: 31.111111111111%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -17px; margin-left: 36.666666666667%;"></div>
<div class="event_goal" style="position: absolute;margin-top: -27px; margin-left: 36.666666666667%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -17px; margin-left: 64.444444444444%;"></div>
<div class="event_corner" style="position: absolute;margin-top: -17px; margin-left: 76.666666666667%;"></div>
<div class="event_ycard" style="position: absolute;margin-top: -17px; margin-left: 80%;"></div>
</div>

.event_goal {
    width: 12px;
    height: 12px;
    background-size: 20px auto;
    background-image: url(/img/timeline.svg);
    background-repeat: no-repeat;
    background-position: -4px -3px;
    display:inline-block;
}
.event_corner {
    width: 12px;
    height: 12px;
    background-image: url(/img/corner.png);
    display:inline-block;
    background-size: 12px auto;
    background-color: #fff;
}
.event_ycard {
    width: 12px;
    height: 12px;
    background-image: url(/img/corner.png);
    display:inline-block;
    background-size: 12px auto;
    background-color: #fff;
}