左右で色が別れているボックスで、右のボックスに色をつけるには

Question

<style>
.bbb{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  position: relative;
}
.bbb > div{
  width: 50%;
  font-size: 20px;
  margin: 0;
  text-align: center;
  padding: 10px;
}
.left-boxb {
  color: #ffffff;
  background-color: #0454a4;
  line-height: 2
  font-weight:  bold;
  Font-family:”sans-serif”      
}
</style>

<div class="bbb">
  <div class="left-boxb">
<b>左のボックスの文字</b>
  </div>
  <div c1ass="right-box">
   <font color="#696969">
右のボックスの文字
</font>
</p>
  </div>
</div>

このコードでボックスを作りました。
左のボックスはバックグラウンドカラーで変えられるとわかるのですが、右のボックスの背景色を変えたい場合、どうすればいいのでしょうか。

このサイトに載っていたコードを以下のようにアレンジしてみたりもしたのですが、
https://www.sejuku.net/blog/56401

 .left-boxb:nth-child(1) {
    background-color:  #2196F3; /* 背景色指定 */
}
 
.left-boxb:nth-child(2) {
    background-color:  #4CAF50; /* 背景色指定 */
}

それでもダメでした。

もしかして、右のボックスにも配色をできるように、コードを1から書き直したほうがいいのでしょうか。

Answer 1

<div c1ass="right-box">

エルが「いち」になっています

Comments

[AmiI]

とりあえず直しました。

[yambejp]

nth-child(2) はHTML要素しか指定できません
同じクラスの中のn番目という処理はできませんので
HTML自体を工夫する必要があります

[AmiI]

ありがとうございます、コードを作り直してみたいと思います。