title: Wrapping Text in Ordered List
body: <p>I have customized the appearance of the numbers in my ol. Now I can't figure out how to make list items that are multiple lines long stay indented to the same point as the first line. The text is wrapping under the numbers.</p>
  
  <p>I had the same issue with unordered lists but fixed using this in CSS:</p>
  
  <pre><code>ul.indentedList li {
  
      list-style-position: outside;
      margin-left: 1em;
  
  }
  </code></pre>
  
  <p>But I can't make this work with the customized ordered list.</p>
  
  <p>Here's what I'm working with:</p>
  
  <pre><code>.custom-counter ol{
  counter-reset: myCounter;
  }
  
  .custom-counter li{
  list-style: none;
  counter-increment: step-counter;
  }
  
  .custom-counter li:before {
  content:counter(step-counter);
  color: white;
  background: #ff5100;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  }
  </code></pre>
  
  <p>And the fiddle: <a href="https://jsfiddle.net/aLkvwu84/1/" rel="nofollow noreferrer">https://jsfiddle.net/aLkvwu84/1/</a></p>