如何使带大圆形计数编号的列表文本与编号紧密对齐？

我已经实现了带大圆形计数编号的步骤列表，圆形编号的效果已经做出来了，但希望列表的标题文本及辅助描述文本能像截图里的Step 3那样，和圆形编号紧密对齐。以下是我的代码及截图：

CSS代码片段 #

/* Large bullet list */
ul_large {
  counter-reset: section;
  list-style: none;
}

li_large {
  margin: 0 0 10px 0;
  line-height: 40px;
}

li_large:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  color: white;
  margin: 10px 20px 0 0;
  border: 1px solid black;
  background: black;
  border-radius: 100%;
  text-align: center;
  font-size: 30;
  font-weight: bold;
}

HTML代码片段 #

<ul class="boldblack">
  <li_large>
    <span class="boldblack">Step 1 text ti</span>tle here
    <h6 class="boldgreen">
      Step 1 descriction with more information here.Step 1 descriction with more information here.
      <span class="boldgreen">
        Step 1 descriction with more information here.
      </span>
      <br>
      <span class="boldgreen">
        Step 1 descriction with more information here.
      </span>
      <span class="boldgreen">
        Step 1 descriction with more information here.
      </span>
      <span class="boldgreen">
        Step 1 descriction with more information here.
      </span>
    </h6>

    <li_large>
      Step 2 text title here
      <h6 class="boldgreen">
        Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here
        <br>
      Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here
      </h6>

      <li_large>
        Step 3 text title here
        <h6 class="boldgreen">
          Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here
          <br>
      Step 2 descriction with more information here.Step 2 descriction with more information here.Step 2 descriction with more information here
        </h6>
        <h6 class="boldgreen">
          &nbsp;
        </h6>

效果截图 #

内容的提问来源于stack exchange，提问作者slang75