Text wrapping in numbered list - html

Question

I have a styled numbered list but text is wrapping under the number.
How can I fix it.
I have numbers styled using CSS. I tried using different padding and margins, nothing works.
ol.numbered-list {
counter-reset:item;
margin-left:20;
padding-left:0;
}
ol>li {
counter-increment:item;
list-style:none inside;
margin: 30px 0;
overflow: hidden;
font-size: 16px !important;
line-height: 1.3;
text-indent: -1em;
}
ol>li:before {
content:counter(item) ;
margin-right: 20px;
padding: 8px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 45px;
background: #fff;
border: 2px solid #01A7E5;
color: #01A7E5;
text-align: center;
font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 800;
float: left;
}
<ol class="numbered-list">
<li><strong><span style="color:#01A7E5;">Invoice Number</span></strong></li>
<li><strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.</li>
<li><strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
Number.
</li>
<li><strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.</li>
<li><strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
<g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
electric bill rates.</li>
<li><strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please do
so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.</li>
</ol>

Answer 1

Is this what you're looking for? I have removed the float:left from your :before tag - as this usually removes the item from the usual layout.
In order to make the :before and your content align on one line - I've wrapped your text in a <p> tag and used display:flex on the list items (li).
ol.numbered-list {
padding-left: 0;
}
ol>li {
counter-increment: item;
margin: 15px 0;
display: flex;
}
ol>li:before {
content: counter(item);
margin-right: 20px;
padding: 8px;
border-radius: 50%;
min-width: 45px;
height: 45px;
border: 2px solid #01A7E5;
color: #01A7E5;
text-align: center;
font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 800;
}
p {
margin: 0;
}
<ol class="numbered-list">
<li>
<p>
<strong><span style="color:#01A7E5;">Invoice Number</span></strong>
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
Number.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
<g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
electric bill rates.
</p>
</li>
<li>
<p>
<strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please
do so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.
</p>
</li>
</ol>