Почему два div не выровневаются при точных значений координат?

Из-за строчки margin-top, удалите этот параметр, либо поставь 102,104px

Потому что у тебя высота блоков не 100, а 102. Наверное, ты хотел вот так:

* {
  box-sizing: border-box;
}

#block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
}

#block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  margin-left: 104px;
  margin-top: -100px;
}

<div id="block1"></div>
<div id="block2"></div>

PS: А вообще, ты что-то странное делаешь.

Странно, что столько людей сказали про 102px, но никто не сказал откуда берутся эти 2px..

Всё дело в border: 1px, из-за того, что есть свойство box-sizing, которое по дефолту имеет значение content-box, border будет добавлять ещё и своё значение размера к основному.

Именно так получается, что фактически ваш блок равен следующим размерам:

width  = border-left-width + width + border-right-width  = 1px + 100px + 1px = 102px
height = border-top-width + height + border-bottom-width = 1px + 100px + 1px = 102px

По этому чтобы расположить блок #block2 на том же уровне, что и block1, вам потребуется указать margin-top: -102px.

#block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
}

#block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  margin-left: 104px;
  margin-top: -102px;
}

<div id="block1"></div>
<div id="block2"></div>

Или указать значение для блоков box-sizing: border-box, тогда размеры border будут "съедаться вовнутрь", тем самым блок всегда будет того размера, которого вы указали.

#block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
}

#block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  margin-left: 104px;
  margin-top: -102px;
}

<div id="block1"></div>
<div id="block2"></div>

А вообще не понятно зачем такое извращение, чтобы расположить элементы горизонтально, давно используют Flexbox

#block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  box-sizing: border-box;
}

#block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  box-sizing: border-box;
  margin-left: 104px;
  margin-top: -100px;
  animation: BorderWidth 1s linear infinite alternate;
}

@keyframes BorderWidth {
  to {border-width: 15px;}
}

<div id="block1"></div>
<div id="block2"></div>