更改flexbox中第二個孩子的背景顏色

Question

我想將flexbox中第二個孩子div的背景顏色設置爲紅色，但無法這樣做。我只能設置第一個孩子的背景顏色。

.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/

第二個孩子的文本也從第一個孩子對準不同。第一個孩子的文字向左對齊，而第二個孩子的文字向中央對齊。我是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>