我的朋友，最好不要使用静态数字，相反，你可以在CSS中使用counter-reset或使用ol标记来使数字动态化。
此外，通过使用ol标记，您不需要注意数字的样式。
我在代码中放入::marker是为了向您展示，您甚至可以控制标记的样式。
您可以将list-style-type更改为decimal以删除单个数字之前的零。

:root {
  --primary-color: blue;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 1px black;
}

#captions {
  display: flex;
  justify-content: center;
}

#captions p {
  flex: 1 0 auto;
  width: 100%;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-color);
  text-align: center;
  border: solid 1px green;
}

.inputs {
  list-style-type: decimal-leading-zero;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  gap: 15px 0;
  padding-left: 0;
}

.inputs li div {
  display: flex;
  width: 220px;
  justify-content: space-between;
  align-items: center;
}

.inputs li::marker {
  color: var(--primary-color);
}

.inputs input[type=number] {
  width: 30px;
}

<main id="main">
  <header id="captions">
    <p>Sections</p>
    <p># of Questions</p>
  </header>
  <ol class="inputs">
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
    <li>
      <div>
        <input type='checkbox' /><input type="number" />
      </div>
    </li>
  </ol>
</main>

Flexbox是一维的。您需要切换到grid或指定元素宽度以在Flex容器中对齐内容。另外，不要在布局中使用空白字符。使用flex属性、边距等。
一种相当简单的方法是在flex元素中调整跨度的大小并使其居中。你必须选择一个大小，让你相当接近任何 * 最大 * 大小，你希望需要，然后右对齐其内容。我添加了 Package 器，使列的宽度为50%。

input[type=number],
p {
  width: 30px;
  margin-left: 75px;
  margin-right: 75px;
}

#captions h2 {
  color: blue;
  display: inline-block;
  width: 180px;
  border: solid 1px green;
  text-align: center;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
}

.inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.inputs span {
  display: flex;
  justify-content: center;
  width: 50%;
}

.inputs span span {
  display: inline-block;
  width: 50px;
  text-align: right;
}

<div id="main">
  <span id="captions">
    <h2>Sections</h2><h2># of Questions</h2>
  </span>

  <p class="inputs">
    <span><span>1 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>

  <p class="inputs">
    <span><span>10 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>

  <p class="inputs">
    <span><span>100 <input type='checkbox'></span></span>
    <span><input type="number"></span>
  </p>
</div>