页边距移动每个元素而不是移动特定元素？

Question

标题在添加时说了句，margin-top: 50px;会移动我所有其他元素，例如它们是否彼此连接？我什至没有为自己的text1设置margin-top并添加元素，它们只是与其他元素保持一致...

确保将所有内容对齐是一件好事，但是当某些内容看起来不对齐时，似乎无法在不重新放置所有其他元素的情况下重新放置它？这是my code：

function getDate() {
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0');
  var yyyy = today.getFullYear();

  today = mm + '/' + dd + '/' + yyyy;
  document.getElementById('clock').value = today
  setTimeout(getDate, 1000)
}
getDate();

.fill-out {
  outline: none;
  border: 0;
  margin-left: 30px;
  display: inline-block;
  font-family: monospace;
  font-size: 25px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

#box1,
#box2,
#box3 {
  width: 16px;
}

#box4 {
  width: 31px;
}

#box5 {
  width: 31px;
}

#box6 {
  width: 46px;
}

#main-text {
  font-size: 150px;
  text-align: center;
  border: 0;
  border-bottom: 10px solid #000000;
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
  user-select: none;
  width: 1360px;
  margin-left: -8px;
}

.text {
  display: inline-block;
  font-size: 25px;
  margin-right: -36px;
  margin-left: -6px;
  margin-top: 7px;
  user-select: none;
  text-align: center;
  font-family: monospace;
}

.text1 {
  display: inline-block;
  font-size: 25px;
  margin-right: -36px;
  margin-left: -6px;
  user-select: none;
  text-align: center;
  font-family: monospace;
}

#clock {
  width: 151px;
  margin-left: 30px;
  text-align: center;
  outline: none;
  color: #000000;
  border: 0;
  font-family: monospace;
  user-select: none;
  font-size: 25px;
}

#adder {
  width: 750px;
  height: 50px;
  margin: 0 auto;
  margin-top: 10px;
  border: 2px solid #000000;
  border-radius: 5px;
}

#box7 {
  width: 106px;
}

#add {
  margin-right: 30px;
  margin-left: 30px;
  background-color: LimeGreen;
  border: none;
  border-radius: 5px;
  outline: none;
  color: white;
  padding: 8px 16px;
  opacity: 0.6;
  transition: 0.6s;
  cursor: pointer;
}

#add:disabled {
  cursor: not-allowed;
}

#add:hover:enabled {
  opacity: 1;
  box-shadow: 4px 8px 16px #888888;
}

#new-adds {
  text-align: center;
  font-size: 4vmin;
  font-family: monospace;
}

<div id="adder" style="text-align:center;">

  <input class="fill-out" id="box1" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="0" maxlength="1" />
  <span class="text">x</span>
  <input class="fill-out" id="box2" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="0" maxlength="1" />
  <span class="text">x</span>
  <input class="fill-out" id="box3" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="0" maxlength="1" />
  <input class="fill-out" id="box4" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="00" maxlength="2" />
  <span class="text1">:</span>
  <input class="fill-out" id="box5" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="00" maxlength="2" />
  <span class="text1">.</span>
  <input class="fill-out" id="box6" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" onkeypress="return isNumber(event)" placeholder="000" maxlength="3" />
  <input class="fill-out" id="box7" type="text" placeholder="Name" maxlength="11" />
  <input id="clock" value="" disabled="" />
  <input type="button" id="add" value="Add" onclick="newAdd()">

</div>
<div id="new-adds">

  <p id="adder-added"></p>

</div>