HTMLもCSSも勉強したことがない素人が、はてなブログのテーマ製作にチャレンジしています。
一番最初に書いた方がいいと思うのは
*, *:before, *:after { box-sizing: border-box }
全ての要素に、box-sizing: border-boxを設定しました。
box-sizing: border-boxの意味は、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。
どういうことかというと、ブラウザの横幅widthには、borderとpaddingが通常含まれていません。
私は今回初めてCSSで作成したのですが、最初これがわからずに要素からはみ出してしまうんです。
面倒なので、最初から全要素にborderとpaddingを含めるように設定しました。
こうしておけば意図せず要素からはみ出てしまうのを防げます。
雑感:基礎がないとこういうところで躓いてしまう。