Javascript CSS容器中的项未正确对齐

我通过以下步骤练习JavaScript和CSS

是指向GitHub repo的链接，在那里可以找到脚本

我手工输入了整个代码，以便更熟悉它。在我的浏览器中打开

index.html

时，内容会显示在最底部和最右侧，而不是应该居中显示。我想可能是我输入了错别字，所以我从GitHub复制粘贴了整个代码并刷新了它，但仍然没有任何更改。我可能做错了什么？ 问题是否在于索引，而不是脚本

这是我的密码：

：根目录{
背景色：#ecf5ff；
字体大小：62.5%；
}
* {
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
填充：0；
颜色：#333；
}
h1，
h2，
h3，
h4{
边缘底部：1rem；
}
h1{
字体大小：5.4rem；
颜色：#56a5eb；
边缘底部：5雷姆；
}
h1>跨度{
字体大小：2.4rem；
字号：500；
}
氢{
字号：4.2rem；
边缘底部：4rem；
字号：700；
}
h3{
字体大小：2.8rem；
字号：500；
}
/*公用事业*/
.集装箱{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：80rem；
保证金：0自动；
}
.容器>*{
宽度：100%；
}
.柔性柱{
显示器：flex；
弯曲方向：立柱；
}
.柔性中心{
证明内容：中心；
对齐项目：居中；
}
.居中对齐{
证明内容：中心；
}
.文本中心{
文本对齐：居中；
}
.隐藏{
显示：无；
}
/*钮扣*/
.btn{
字体大小：1.8rem；
填充：1rem0；
宽度：20雷姆；
文本对齐：居中；
边框：0.1rem实心#56a5eb；
边缘底部：1rem；
文字装饰：无；
颜色：#56a5eb；
背景色：白色；
}
.btn:悬停{
光标：指针；
盒子阴影：0.4雷姆1.4雷姆0 rgba（86185235,0.5）；
变换：translateY（-0.1rem）；
转换：转换150ms；
}
.btn[禁用]：悬停{
光标：不允许；
盒影：无；
转化：无；
}

小测验
Oberlingual

您被

结束标记弄糊涂了。这是你的错误：

<div class="container"></div>
      <div id="home" class="flex-center flex-column"></div>
...

运行此代码段以在此处检查：

：根目录{
背景色：#ecf5ff；
字体大小：62.5%；
}
* {
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
填充：0；
颜色：#333；
}
h1，
h2，
h3，
h4{
边缘底部：1rem；
}
h1{
字体大小：5.4rem；
颜色：#56a5eb；
边缘底部：5雷姆；
}
h1>跨度{
字体大小：2.4rem；
字号：500；
}
氢{
字号：4.2rem；
边缘底部：4rem；
字号：700；
}
h3{
字体大小：2.8rem；
字号：500；
}
/*公用事业*/
.集装箱{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：80rem；
保证金：0自动；
}
.容器>*{
宽度：100%；
}
.柔性柱{
显示器：flex；
弯曲方向：立柱；
}
.柔性中心{
证明内容：中心；
对齐项目：居中；
}
.居中对齐{
证明内容：中心；
}
.文本中心{
文本对齐：居中；
}
.隐藏{
显示：无；
}
/*钮扣*/
.btn{
字体大小：1.8rem；
填充：1rem0；
宽度：20雷姆；
文本对齐：居中；
边框：0.1rem实心#56a5eb；
边缘底部：1rem；
文字装饰：无；
颜色：#56a5eb；
背景色：白色；
}
.btn:悬停{
光标：指针；
盒子阴影：0.4雷姆1.4雷姆0 rgba（86185235,0.5）；
变换：translateY（-0.1rem）；
转换：转换150ms；
}
.btn[禁用]：悬停{
光标：不允许；
盒影：无；
转化：无；
}

小测验
Oberlingual

Html代码有两个错误。 2个div元素没有任何子元素，因为您在错误的位置关闭了每个元素。 此代码将在以下情况下工作：

<div class="container">
 <div id="home" class="flex-center flex-column">
  <h1>Oberlingual</h1>
  <a class="btn" href="/game.html">Play</a>
  <a class="btn" href="/highscores.html">High scores</a>
 </div>
</div> 

小测验
Oberlingual

Ahh，非常感谢！请原谅我的无知。@BenjaminNüssli，没问题：）我们总是很乐意在这里帮忙。如果你有任何问题，请告诉我。祝你好运。