箇条書き設定をコピペしたら右カラム内も変化した問題

こんにちは羊です。
なんだかPCでブログ見てみたら、先日の記事を書いてから表示が変わってしまったらしく･･･。
原因がわからない。

f:id:sheep3-icf:20181216164926p:plain

どうしてこうなった。

コードを確認してみよう

とりあえずこのとき貼り付けたのは以下のコードだった。

ul, ol { 
  background: #fffcf4; 
  border-radius :8px;/*角の丸み*/ 
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/ 
  padding: 0.5em 0.5em 0.5em 2em; 
} 

ul li, ol li { 
  line-height: 1.5; 
  padding: 0.5em 0; 
}

ので、このul(順序なし箇条書き)とol(順序あり箇条書き)が右カラムの構成でも使われてたからこうなったんじゃないかと思うんだよね･･･？
こんなときに限ってこのコードどこで拾ってきたのか覚えてないけど。

ul,olの使い方はこのサイトを参考
saruwakakun.com

Chromeの検証機能を使ってみよう

F12キー(Chromeのデベロッパーツール)を使ってテーマのコードを見てみた。
正直どこに何が書いてあるのかさっぱりだけど。

ツールの使い方で参考にしたのはこのサイト
saruwakakun.com

うーん？
うーん････ん？？？
あれ、これ色んなところからCSSコピペしてきたから、統一性がなくて2重指定とかなってる感じなのかな？？？

f:id:sheep3-icf:20181216185759p:plain

わーーーー。
うーんコピペしたらできると思ってたのになかなか難しい･･･。

むむむ。

今回は記事内でol(順序あり箇条書き)を使いたかった。
でもコピペをそのまま使ったらおかしくなった。
デベロッパーツール使ったらul要素が右カラム内で使われてるっぽかった。
じゃあulをコードからはずしてみる。

下記で実行。

ol { 
  background: #fffcf4; 
  border-radius :8px;/*角の丸み*/ 
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/ 
  padding: 0.5em 0.5em 0.5em 2em; 
} 

ol li { 
  line-height: 1.5; 
  padding: 0.5em 0; 
}