Почему кружок выходит за пределы линии?

Question

[Роман Тузов]

Есть линия с кружком внутри, круг на left: 100% должен быть у самого края линии, но на деле он выходит за её пределы. Как пофиксить эту проблему и сделать, чтобы кружок мог максимум доходить до края линии?
https://codepen.io/HutsonR/pen/ZEGBoWz

Answer 1

[Aetae]

Потому что left - положение слева. У васleft: 100%, значит кружок рисуется слева начиная с 100% родителя.
Вам надо или использовать right: 0 вместо left: 100%, либо добавить margin-left: -10px, ну либо использовать left: calc(100% - 10px), где 10px - ширина кружка.

Answer 2

[Павел Романов]

Смещение происходит на 100% размера контейнера .race__box-line по левому краю круга, из-за этого элемент выходит за рамки. Исправить можно так:

.race__box-ball {
    left: calc(100% - 10px); # 10px - ширина круга
}