Vic Vic - 4 months ago 18
CSS Question

Change background color of the second child in a flexbox

I want to set the background color of the second child div in a flexbox to red but am unable to do so. I am only able to set the background color of the first 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/

The text of the second child is also aligning differently from the first child. The first child's text is aligning to the left whereas the second child's is aligning to center. I am new to flexbox. I would very much appreciate your help!

Answer

; is not allowed in css so it breaks the stylesheet. Remove it and it will work:

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

Comments