ちょっと難しい話になるので、分かる方だけお付き合いください。

h2、h3タグの外観もチョコで統一しようと思い、ボーダーや色をそのように調整。
ブロック要素のままだと画面一杯の幅になってしまうので、インライン要素に。

ところが。

ブロック要素のものを下手にインライン要素にすると、cssを非表示にされた時とかに支障が出てしまいます。
例えばこつぶのページをこのcssファイルで表示しようとすると、タイトルの後改行されずにそのまま下の文章が横に表示されていってしまいます。
これはマズい。

色々試行錯誤した結果、どうやらmargin-right:100%;とするとブロック要素のまま内容物に合わせて幅が調整されることが判明。
良かった良かった、と胸を撫で下ろしたのも束の間。

IE以外でほぼ全滅(_ _;)

そうですよね、右余白100%としたらそうなるのが正しいですよねＴへＴ
でもそうなるとどうすれば……。
具体的にはテーブルみたいな挙動をしてくれれば万々歳なのですが。。。

と。

display:table;

調べていると、普段見ているcss解説サイトにはなかった項目が。
テーブル！？　もしかしてこれって……。

ヽ(Ｔ▽Ｔ)ノ

できました！　IE以外のブラウザでも内容物に合わせたブロック要素ができました！
……うん？　でもこれ、「IEは8以降でないと対応してない」って書いてあるのですが…IE6でも問題なく表示されてます。

ああ！

margin-right:100%;があるおかげでIE6でもちゃんと動いてるのですね。
試しに消してみたらただのブロック要素に戻りました。

というわけで。

同じ悩みをお持ちの方は試してみられては如何でしょうか。
わざわざhタグの後に<br>を入れたり、別途<div>で囲んだりする必要がなくなる程度ですけど、改装の際にそれらを追記する手間がイヤ！とかの状況では役に立ちます。

ちなみにテーブルの中で使うとIE限定で崩れるので、別途以下の記述が必要になります。
td h2 {margin-right:0%;}