Испытание. Дуэль.Что-то пошло не так...

body {
width: 280px;
margin: 0;
padding: 0;
}

.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}

.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}

li {
position: relative;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

li:last-child {
margin-right: 0;
}

.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

}

.lever {
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}

.miss .lever{
display: none;
}

.shooter-2 li:nth-child(1) .lever{
display: none;
}

.shooter-2 li:nth-child(4) .lever {
display: none;
}

.shooter-2 li:nth-child(5) .lever{
display: none;
}

Почему у меня, в результате, всё скомпоновалось в одной точке?


Сравнивал с тем что нашёл на форуме, отличается исходный код, эт как?! эт потиму?! 0_0
Сбой какой-то или я чего-то не понимаю?

Лишняя скобка в выделенном фрагменте.
Исходный код не так давно поменялся. Теперь там всё на флексбоксах. Раньше было на флоатах. Предполагаю, что когда вы копировали код из другого варианта, заодно скопировали лишнюю скобку.

Скорее всего именно это я и сделал, спасибо за ответ