Nested numbered list with correct indentation in CSS. Live example at http://jsfiddle.net/a84enL8k/.

sample.png

style.css

/**
 * Nested numbered list with correct indentation.
 *
 * Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
 * Source: https://gist.github.com/jirutka/32049196ab75547b7f47
 */

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

style.scss

/**
 * Nested numbered list with correct indentation.
 *
 * Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
 * Source: https://gist.github.com/jirutka/32049196ab75547b7f47
 */

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;

  &:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
  }
}

li ol > li {
  margin: 0;

  &:before {
    content: counters(item, ".") " ";
  }
}