How to evenly space text with text boxes?

So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.

See for yourself here

If not here's the code,

.text1 {
  display: inline-block;
  font-size: 4vmin;
  margin-right: -22px;
  margin-left: -4px;
  user-select: none;
  text-align: right;
}

.fill-out {
  outline: none;
  border: 0;
  margin-left: 18px;
  display: inline-block;
}

#box1 {
  width: 13px;
}

#box2 {
  width: 13px;
}

#box3 {
  width: 21px;
}

<div>

  <input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
  <span class="text1">:</span>
  <input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
  <span class="text1">.</span>
  <input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />

</div>
```

Type in only 2's then run again and type in 1's

Solution

Try using monospaced fonts.

because i don't think you will have the result you want with the default font.

see on wikipedia the difference wiki.