私はolのスタイリングを試みています。私はほとんどすべての要件を実行しましたが、liの中にpタグの前にpadding-left: 50pxを削除することはできません。pタグの前に余った詰め物を取り除く
liの最初の行にはpadding-left: 50pxを設定するだけですが、pの場合もpadding-left: 50pxと設定します。
例を参照してください：私はそれを修正する助けにはなりません::afterliのために理解したようhttps://jsfiddle.net/8gm4zmc4/
を。
liの最初の行にpadding-left: 50pxを設定するか、pより前にpadding-left: 50pxを削除するようにアドバイスしてください。
あなたのp要素がli要素内にネストされているため、li内のすべてがパディングを設定したときに右に移動するためです。私が行ったようliからpadding-leftが50pxあるご
.purchase-way__list {
display: inline-block;
box-sizing: border-box;
text-align: left;
margin-top: 35px;
width: 100%;
counter-reset: foo;
}
.purchase-way__item {
position: relative;
counter-increment: li;
list-style: none;
box-sizing: border-box;
font-family: ProximaNovaBold, sans-serif;
font-size: 24px;
line-height: 0.833;
color: #01b04c;
margin-bottom: 80px;
padding-left: 50px;
}
.purchase-way__item::before {
content: counter(li);
position: absolute;
left: 0;
top: -6px;
background: #01b04c;
height: 32px;
width: 32px;
font-family: ProximaNovaRegular, sans-serif;
font-size: 18px;
color: #fff;
line-height: 32px;
text-align: center;
border-radius: 16px;
}
.purchase-way__text {
box-sizing: border-box;
text-align: left;
font-family: ProximaNovaRegular, sans-serif;
font-size: 14px;
line-height: 1.714;
color: #000;
margin-top: 30px;
margin-left: -50px;
}<ol class="purchase-way__list">
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
</ol>は、あなたがあなたのネストされたp-50pxの上margin-leftを設定することができる場合：あなたの.purchase-way__textのように負のmargin-leftを設定することにより、この問題を解決することができます上記の例。
各<li>（<p>の外側の部分）のタイトルを<span>または他のタグに入れて、左にパディング（50px）の別のスタイルを付けることをお勧めします。これと同じように：
<li class="purchase-way__item">
<span class="purchase-way__header">HEADER</span>
<p class="purchase-way__text">PARAGRAPH HERE</p>
</li>
：は50px属性、および "購入-way__item" をしません。あなたが最初の行にspanタグを付けることができ
、その後、
にまたがるようにパディング左を与えるあなたは.purchase-way__textにmargin-left: -50px;を追加することができます（=あなたのpタグ）
これは左に段落を移動します50px （pがliの子要素であるので、あなたはそれのためにパディングを「削除」することはできません。）