由于某种原因，我能够实现我在当天早些时候想要的，但现在当我试图重新创建我的代码时，它不会复制。

我想要两个标题元素h2和h3，在一个div行中居中对齐，在巨型屏幕部分中。
**然后 ，我想在h3元素中添加底边距，使其稍微高于h2元素，如图所示。

我仍然有我的原始代码，但即使复制粘贴了具有相同样式的代码，h3元素最终也会直接位于h2下面。
我已经尝试过使用dev工具进行交叉引用，我发现唯一的区别是包含h2和h3元素的div行缺少display：flex，但它仍然不起作用。
what i want to happen
what is happening
原始工作代码：

HTML:
<section class="jumbotron">
  <div class="container">
    <div class="row">
      <h2>Jumbotron</h2>
      <h3>Bootstrap</h3>
    </div>
  </div>
</section>

CSS:
.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80');
  background-size: cover;
  color: #ffffff;
  height: 400px;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: ;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

谢谢你的帮助！