Подскажите, как в данном случае можно увеличить размер шрифта элемента при наведении на него мышкой не сдвигая при этом соседние блоки?

body {
  padding: 0;
  margin: 0;
}

#header {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 890px;
  margin-top: 12px;
}

#block-home {
  font-size: 35px;
  font-style: italic;
  transition: 0, 25s;
  font-family: 'Comic Sans MS';
}

.main-menu-block {
  display: inline;
  font-size: 25px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: orange;
  margin-left: 30px;
  width: 100px;
  height: 40px;
}

.main-menu-block a {
  text-decoration-line: none;
}

.main-menu-block a:visited {
  color: inherit;
}

.main-menu-block a:hover {
  color: orangered;
  display: inline-block;
  transform: scale(1.2);
}

<div id="header">
  <div class="main-menu-block" id="block-home"><a href="">Amazing!</a></div>
  <div class="main-menu-block bMenu" id="block-video"><a href="">Видео</a></div>
  <div class="main-menu-block bMenu" id="block-news"><a href="">Новости</a></div>
  <div class="main-menu-block bMenu" id="block-humor"><a href="">Юмор</a></div>
  <div class="main-menu-block bMenu" id="block-lifehack"><a href="">Лайфхаки</a></div>
  <div class="main-menu-block bMenu" id="block-recipes"><a href="">Рецепты</a></div>
  <div class="main-menu-block bMenu" id="finder"></div>
</div>