Circled Background should stay the same size

So I want to display a number with a circled background. However I don't know the length of the number. My current solution will only show the correct size when I have two digits. How can I ensure, that it will stay the same if I have only one digit?

.circled-background{
  background:lightgreen;
  border-radius:50%;
  padding:28px;
}

<h1>1 Digit</h1>
<i class="circled-background">1</i>
<br><br>
<h1>2 Digits </h1>
<i class="circled-background">11</i>
<br><br>
<h1>3 Digits</h3>
<i class="circled-background">111</i>