CSS scale缩放元素导致flex容器内其他元素位移的解决方法

布局偏移和transform: scale(1.1)无关，核心诱因是你在#hero a:hover状态下新增了padding: 5px 12px属性。
#hero是纵向排列的flex容器，且设置了justify-content: center：当a标签因为新增padding改变了自身在文档流中的实际占位高度时，flex会重新计算所有子元素的居中位置，上方的h1、p标签自然会跟着移位。transform: scale本身只会触发合成层渲染，不会改变元素占位，本来不会导致布局跳动。

推荐用第一种方案，改动最小、效果最顺滑：

方案1：固定a标签的默认占位尺寸 #

把hover状态才加的padding、圆角提前写到a标签的默认样式里，默认状态背景设为透明，hover时只切换文字、背景颜色和缩放，从根源上避免hover时元素尺寸变化：

#hero a{
  text-decoration: none;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
  /* 提前写入hover时的padding、圆角，固定元素占位 */
  padding: 5px 12px;
  border-radius: 10px;
  background: transparent;
  /* 过渡覆盖所有变化属性 */
  transition: all 500ms ease-in-out;
  position: relative;
  /* 缩放原点设为左侧居中，避免缩放时按钮向左偏移 */
  transform-origin: left center;
}

/* 调整下划线位置适配默认padding */
#hero a::after{
  content: "";
  width: calc(100% - 24px);
  height: 2px;
  background: #e50914;
  position: absolute;
  bottom: 5px;
  left: 12px;
}

#hero a:hover{
  color: #121212;
  transform: scale(1.1);
  background: #e50914;
  /* 删除hover状态下的padding、border-radius属性，避免尺寸变化 */
  text-decoration: none;
}

修改后a标签从页面加载开始占位尺寸就是固定的，hover时不会改变文档流布局，上方元素自然不会移位。

方案2：外层包裹固定高度容器 #

如果不想改动原有a标签的样式，可以给a标签套一层固定高度的父容器，父容器尺寸不随a的hover状态变化，就不会触发flex重排：
先修改HTML部分（注意原代码里a标签的clas是拼写错误，要改成class）：

<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<div class="cta-container">
  <a href="#" class="button-landing">BOOK NOW</a>
</div>

再新增对应CSS：

.cta-container {
  /* 高度 = a标签字体大小 + 上下padding总和，预留足够的hover空间 */
  height: calc(2rem + 10px);
  display: flex;
  align-items: center;
}

内容的提问来源于stack exchange，提问作者Sahil Singh