жирный шрифт портит выравнивание полей ввода

Question

Это то, что я хочу.

Это то, что я получаю.

Вот мой код. Проблема в том, что когда я пытаюсь сделать текст метки жирным, используя «шрифт», он выходит из выравнивания. Но без этого выравнивание в порядке.

body {
  background-color: black;
  background-image: url("1.png");
  background-repeat: repeat;
}

h1 {
  text-align: right;
  display: block;
}

.right {
  text-align: right;
  display: block;
}

div {
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  width: 90%;
}

div * {
  flex: 1;
}

input[type="text"] {
  margin: 0 0 10px 0;
}

<h1>Evergreen Valley College Survey</h1>
<p class="right"><a href="https://www.google.com">Email webmaster</a> |
  <a href="https://www.google.com">Evergreen Valley College Website</a></p>
<h2>Personal Information</h2>
<div>
  <form>
    <label for="fname">Name:</label>
    <input type="text" id="fname" name="fname">
    <br>
    <label for="mail">Email:</label>
    <input type="text" id="mail" name="mail">
  </form>
</div>

Answer 1

Это просто совпадение, что два входа выровнены в первом случае. Чтобы быть уверенным в получении того, что вы хотите, вы должны назначить фиксированную ширину меткам:

label {
  display: inline-block;
  width: 50px;
}