在默认 Jekyll SCSS / CSS 中插入 Flexbox CSS 的位置

如何解决在默认 Jekyll SCSS / CSS 中插入 Flexbox CSS 的位置

我正在尝试使用我所在大学在 GITLAB 中提供的模板在 Jekyll 中使用 Flex 容器。

在我的 HTML 页面中，我定义了容器来并排显示文本的转录和翻译。

我想使用的相应 CSS 是：

/**
 * FlexBox for pages
 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

我已将其插入到 Jekyll 存储库中 _layout.scss 文件夹内的 _sass 文件中。

提交被接受，但部署页面的布局似乎忽略了 flex 容器。添加 FlexBox CSS 的正确位置是什么？

还是我的 HTML 代码有误？

HTML 代码的相关部分如下所示：

<div class="flex-container">
  <div><p><strong>Transcription:</strong></p>
  <p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div><p><strong>Translation:</strong></p>
  <p>Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>