Change start number of an ordered list (ol)
<p>I would like to know how to start my <code>ol</code> with a different number, say 4. I have tried using <code>start="4"</code> and I have tried adding a class to the <code>ol</code> and setting <code>counter-reset: 4;</code> but none of this seems to work. The number doesn't change.</p>

<p>I have tried to remove all my stylings to put it right back to a plain <code>ol</code> list but it still doesn't work. Can someone please tell me where I am going wrong?</p>

<p>I just want the second list to have the number in the red circle start with 4.</p>

<p><strong><a href="https://jsfiddle.net/h694mbh2/" rel="nofollow">JSFIDDLE</a></strong></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="row"&gt;
                        &lt;div class="col-md-6"&gt;
                             &lt;ol class="number-circles"&gt;
                           &lt;li value="7"&gt;&lt;div class="ol-block"&gt;&lt;div class="blue-heading"&gt;Title 1&lt;/div&gt;
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. &lt;/div&gt;
                           &lt;/li&gt;
                            &lt;li&gt;&lt;div class="ol-block"&gt;&lt;div class="blue-heading"&gt;Title 2&lt;/div&gt;
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. &lt;/div&gt;
                           &lt;/li&gt;
                           &lt;li&gt;&lt;div class="ol-block"&gt;&lt;div class="blue-heading"&gt;Title 3&lt;/div&gt;
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. &lt;/div&gt;
                           &lt;/li&gt;

                        &lt;/ol&gt;
                        &lt;/div&gt;
                        &lt;div class="col-md-6"&gt;
                             &lt;ol class="number-circles four"&gt;

                            &lt;li&gt;&lt;div class="ol-block"&gt;&lt;div class="blue-heading"&gt;Title 4&lt;/div&gt;
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. &lt;/div&gt;
                           &lt;/li&gt;
                            &lt;li&gt;&lt;div class="ol-block"&gt;&lt;div class="blue-heading"&gt;Title 5&lt;/div&gt;
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. &lt;/div&gt;
                           &lt;/li&gt;
                        &lt;/ol&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.col-md-6 {

   float: left;
  width: 50%;

}
.number-circles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
}

  .blue-heading {
      color: red;
      font-weight: 600;
      margin-bottom: 5px;
  }

  li {
  counter-increment: step-counter;
  margin-bottom: 40px;

}

 .number-circles li::before {
          content: counter(step-counter);
          margin-right: 15px;
          font-size: 17px;
          background-color: red;
          border: solid 6px yellow;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          height: 40px;
          display: inline-block;
          width: 40px;
          height: 40px;
          padding: 2px 8px;
          text-align: center;
          float: left;
    }

   .ol-block {
        float: left;
        display: inline-block;
        width: 85%;
        margin-bottom: 20px;
    }



ol.four { counter-reset: item 2; }
</code></pre>