Edit on
<section>
  <ol>
    <li>Go to store</li>
    <li>Go to meat counter</li>
    <li>Ask butcher for skirt steak</li>
  </ol>
</section>

<section>
  <ol>
    <li>Drive home</li>
    <li>Park safely</li>
    <li>Start grill</li>
  </ol>
</section>

<section>
  <ol>
    <li>Marinate steak</li>
    <li>Put on grill</li>
    <li>Wait 8 minutes and flip</li>
  </ol>
</section>

<section>
  <ol>
    <li>Bring steak inside</li>
    <li>Wait 10 minutes</li>
    <li>Eat</li>
  </ol>
</section>
body {
  background: #f06d06;
  counter-reset:li, mega-step;
}

section {
  width: 20%;
  float: left;
  margin: 20px;
  background: white;
  counter-increment: mega-step;
  padding: 5px;
}

section:before {
  content: counter(mega-step, upper-roman);
  display: block;
  padding: 10px;
  background: #f06d06;
  width: 10%;
  text-align: center;
  color: white;
}
ol{
  list-style-type: none;  
}

li:before{
  counter-increment:li;
  content: counter(li);
  margin-right:20px;
}
Rerun