Сергей delphinpro

Просто уберите transition

// Реакция на нажатие мышки
document.addEventListener('mousedown', e => {
  // Запоминаем координаты мышки;
  // ...
  // Начинаем слушать перемещение
  document.addEventListener('mousemove', mousemove);
});

// Реакция на перемещение мышки
function mousemove(e) {
  // Отслеживаем координаты, сравниваем с запомненными
  // Вычисляем на сколько получилось смещение
  // Двигаем какой-то блок
}

// Реакция на отжатие мышки
document.addEventListener('mouseup', e => {
  // Отключаем прослушивание перемещения
  document.removeEventListener('mousemove', mousemove);
});

.parent {}

.one {
  width: 315px;
  height: 275px;
}

.two {
  width: 450px;
  height: 245px;

  margin-left: 215px;
  margin-top: -210px;
}

Как вы решаете эту задачу?

Вправляем мозги менеджеру-контентщику.

Если он видит, что картинка криво смотрится, то пусть будет любезен в редакторе админки выставить ей центрирование вместо обтекания.

Вам зелеными буквами выделили подсказку в консоли. Пробовали?

Попробуйте указывать правильный путь к файлам шрифтов.

|--fonts
|  `--myfont.woff2
`--css
   `--style.css

нужно указывать относительно css файла

../fonts/myfont.woff2

Шрифты не будут работать, если вы просто открываете html-файл в браузере.
Необходимо использовать web-сервер.

Это вполне ожидаемое поведение. Пофиксить его, вероятно не получится (мне такие методы неизвестны). Остается два варианта.
1. Не использовать трансформации, как предложили в комментариях. Задать position:relative и анимировать свойство top, вместо transform.
2. Указать фон для родителя, а промежутки между сообщениями устанавливать бордером.
Вот так:

.header {
  display:grid;
  grid-template-columns: 1fr auto 1fr;

  &::after {
    content: ''
  }
}

нет такого