実際に表示されている↓の画面を、構造として捉えると、こういう形で区切られる
クラス名に直すと↓こんな感じ
.contents-itemのなかに、画像・言語名・「〇〇が学べます」という文章が入るので、 ↓のような階層構造が出来上がる。
クラス名に直すとこんな感じ。↓
うまく表示されない時は、↑のような階層構造にコード上でなっているかどうか、確認してみよう。
タグに文字入力用のカーソルを持っていくと、開始タグと終了タグが薄ら白色でハイライトされるので、どこがどう階層になっているかよく分からなくなった時は確認してみよう。
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/19ce3d44-da64-4b6d-9461-8fc7e1b6677f/_2021-02-04_21.22.31.mov
また、インデント（字下げ）がぐちゃぐちゃになっている時は、自動で整理する操作方法がありますので、そっちも試してみると幸せになれます。