<div> Parent is not affecting <div> child? - html

Question

I am working on a periodic table, and I came across a problem:
* {
text-align: center;
}
p {
font-size: 5px;
margin-top: -40px;
}
div {
height: 70px;
width: 70px;
line-height: 60px;
font-family: Trebuchet MS;
font-size: 30px;
}
.row1 {
margin-left: 92px;
background-color: #FFCC33;
}
#lithium {
margin-top: 170px;
}
<div class="row1">
<div id="lithium">Li
<p>Lithium</p>
</div>
<div id="sodium">Na
<p>Sodium</p>
</div>
<div id="potassium">K
<p>Potassium</p>
</div>
<div id="rubidium">Rb
<p>Rubidium</p>
</div>
<div id="cesium">Cs
<p>Cesium</p>
</div>
<div id="francium">Fr
<p>Francium</p>
</div>
</div>
In this case i want to change all div elements that are child to class 'row1' to #FFCC33. It works well if i just put all div's names(i.e. #lithium, #sodium,...{background-color: SOMECOLOR;}, but when i put class name(i.e. row1), it just affects the first child(in this case, its lithium). I have tried changing id to class and vice-versa to no avail. Is this supposed to even work or am I doing everything wrong here?

Answer 1

Try this
.row1 > div {
margin-left: 92px;
background-color: #FFCC33;
}
Demo Here

Answer 2

If you're trying to make sure that all <div> children of .row1 have a background color of FFCC33, try a selector like this:
.row1 > div {
background-color: #FFCC33;
}

Answer 3

You have to remove height:70px in div
* {
text-align: center;
}
p {
font-size: 5px;
margin-top: -40px;
}
div {
width: 70px;
line-height: 60px;
font-family: Trebuchet MS;
font-size: 30px;
}
.row1 {
margin-left: 92px;
background-color: #FFCC33;
}
#lithium {
margin-top: 170px;
}
<div class="row1">
<div id="lithium">Li
<p>Lithium</p>
</div>
<div id="sodium">Na
<p>Sodium</p>
</div>
<div id="potassium">K
<p>Potassium</p>
</div>
<div id="rubidium">Rb
<p>Rubidium</p>
</div>
<div id="cesium">Cs
<p>Cesium</p>
</div>
<div id="francium">Fr
<p>Francium</p>
</div>
</div>