How can i give each <li> a different left padding but they need to be numbered as well??
HTML
<div class="inbrief02">
<p>There are five different equipment types which require testing:</p>
<ul>
<li>Class 0 (equipment with a non earthed metal case).</li>
<li>Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>
<li>Class 1 (equipment with earth protection for the metal casing and protection against shock).</li>
<li>Class 2 double insulated (the live parts are encapsulated in supplementary insulation or reinforced insulation equivalent to double insulation).</li>
<div id="test">
<li>Class III (equipment that are supplied from a separate extra low voltage source SELV which will not exceed 50V).</li>
</div>
</ul>
</div>
That’s invalid markup! A <ul> cannot have a <div> as an immediate child. (You cannot wrap a <li> inside anything else.)
This seems to work, if I understand correctly what you are trying to achieve:
<div class="inbrief02">
<p>There are five different equipment types which require testing:</p>
<ul>
<li>Class 0 (equipment with a non earthed metal case).</li>
<li>Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>
<li>Class 1 (equipment with earth protection for the metal casing and protection against shock).</li>
<li>Class 2 double insulated (the live parts are encapsulated in supplementary insulation or reinforced insulation equivalent to double insulation).</li>
<li id="test">Class III (equipment that are supplied from a separate extra low voltage source SELV which will not exceed 50V).</li>
</ul>
</div>
<li class="first">Class 0 (equipment with a non earthed metal case).</li>
<li class="second">Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>