css - 更改 flexbox 中第二个 child 的背景颜色

Question

我想将 flexbox 中第二个子 div 的背景颜色设置为红色，但无法这样做。我只能设置第一个 child 的背景颜色。

.main{
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
.left_col{
  width: 350px;
  background-color: green;
};
.right_col{
  width: 350px;
  background-color: red;
}

<div class="main">
  <div class="left_col">
  This is the left column. It should be green.
  </div>
  <div class="right_col">
  This is the right column. It should be red.
  </div>
</div>

https://jsfiddle.net/mademoiselletse/e5nhca58/2/

第二个 child 的文本对齐方式也与第一个 child 不同。第一个 child 的文本向左对齐，而第二个 child 的文本向中心对齐。我是 flexbox 的新手。非常感谢您的帮助!

Answer 1

; 在 css 中是不允许的，所以它破坏了样式表。删除它，它将起作用:

.main{
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
.left_col{
  width: 350px;
  background-color: green;
}
.right_col{
  width: 350px;
  background-color: red;
}

<div class="main">
  <div class="left_col">
  This is the left column. It should be green.
  </div>
  <div class="right_col">
  This is the right column. It should be red.
  </div>
</div>