html文档：

html {
  background: url(./background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
}

#container {
  display: flex;
  flex-direction: row;
}

.col {
  flex: 1;
}

.column:first-child {
  flex: 3.5;
  height: 100vh;
}

.row {
  margin-top: 40%;
  background-color: black;
  opacity: 0.6;
  height: min(100px, 20%);
  display: flex;
  flex-direction: row;
}

img {
  opacity: 1;
  height: 100%
}

.column:last-child {
  flex: 6.5;
  height: 100vh;
  background-color: white;
}

<div id="container">
  <div class="column">
    <div class="row">
      <div class="col">
        <img src="./image.png" alt="moon.png">
      </div>
      <div class="col">
        <h1>Hello</h1>
      </div>
    </div>
  </div>
  <div class="column"></div>
</div>

在浏览器中运行上述代码时，'col'类div中的h1元素没有显示。我不明白为什么？是否有元素覆盖了它？
我试过删除图像并更改样式表的一些样式选择，包括删除整个flexbox（row类和/或col类），但似乎没有太大的区别。