#CSS
カテゴリ名の都合で表示範囲を超えると、ボタンが改行されて2行にならないで、カテゴリ名の方が2行になって不格好かも。
ボタンが2行になってほしいな〜。
→display:inline-blockでボタン自体が適宜改行されるようになった。

今回は親要素にあたるheaderにtext-aline: centerがあったのでdisplayを弄れば解消したが、単純にそこだけ弄ればなんとかなるものでもない。

display: inline-blockは、位置の指定はブロックみたいな仕様らしいので、親要素にtext-aline: centerを入れないと中央寄せにならない。（他にも色々手法はあるようだが、ともかくいずれも親要素は必須っぽい）

【親要素とは】
例えばdiv class = "exampleone"の中にdiv class= "example"を入れたときの、先に出てきた方のdivの事。この例だとclass = exampleoneの方が親要素。

解決に必要な知識しか拾ってないのでぼんやりしたイメージでアレだが、親要素で出力範囲と中央寄せとかのレイアウトの枠を決める。
子要素でbackgroundやテキストの具体的な設定をするイメージか。