フレックスボックスの2番目の子の背景色を変更する

Question

フレックスボックスの2番目の子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/

第二子のテキストはまた、異なる最初の子から整列されています。最初の子のテキストは左に整列していますが、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>