Некорректно работает :nth-child

[olorin]

Доброго времени суток. Столкнулся с проблемой с nth-child на странице оформления заказа со способом доставки. Выходит полная путаница. Есть 4 параграфа к каждому из которых присвоен логотип через :before. Но проблема в том что они идут либо не по порядку либо съезжают на один параграф влево. Так же получается присвоить только 3-м параграфам из 4-х. Последнему не выходит. Есть еще одна проблема при переключении радиокнопки(у каждого параграфа есть своя радиокнопка), изображение меняется на соседнее.Прошу помочь в этом разобраться. Заранее спасибо. Вот сам сайт . 

вот CSS: (это последний вариант до этого пробовал по разному nth-child упорядочивать) 

#simplecheckout_shipping .simplecheckout-block-content p:first-child:before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 89px;
	width: 130px;
	top: -50px;
	left: -8px;
	z-index:300;
	background-image: url(/image/catalog/yarninbob/delivery-icon.jpg);
}

#simplecheckout_shipping .simplecheckout-block-content p:nth-of-type(2):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 74px;
	width: 130px;
	top: -34px;
	left: -22px;
	z-index:300;
	background-image: url(/image/catalog/yarninbob/new-post.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(3):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(4):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

[HyperLabTeam]

картинкой набросай что в итоге то нужно?
 

[HyperLabTeam]

э... в общем...

 

[olorin]

14 минут назад, AWARO сказал:

э... в общем...

 

а какое это разрешение экрана?

[Dotrox]

@olorin , вы решили каждые пару месяцев задавать тот же вопрос?

 

Вроде, там уже было найдено решение.

[olorin]

46 минут назад, Dotrox сказал:

@olorin , вы решили каждые пару месяцев задавать тот же вопрос?

 

Вроде, там уже было найдено решение.

И все работало до тех пор пока не добавился еще один вариант доставки (4й) и тогда опять всё поехало

[Dotrox]

1 минуту назад, olorin сказал:

все работало до тех пор пока не добавился еще один вариант доставки (4й) и тогда опять всё поехало

Потому что решение костыльное было.

Перечитайте ещё раз, что я там писал про nth-child и nth-of-type. Вам нужен именно nth-of-type!

[HyperLabTeam]

4 часа назад, olorin сказал:

а какое это разрешение экрана?

так вы что стили ковыряете не проверяя этого?
 - вроде где то между примерно 740  рх до 980рх

[olorin]

17 минут назад, Dotrox сказал:

Потому что решение костыльное было.

Перечитайте ещё раз, что я там писал про nth-child и nth-of-type. Вам нужен именно nth-of-type!

Точно, помогло, спасибо огромное, у меня nth-of-type Было присвоено одному из элементов остальным nth-child.