私も、はじめてレイアウトしたときは、この問題でつまづきました。
これはですね、<H1>とかのいわゆる見出しタグと、
<p>タグとかにみられる、特殊なことなんですけども、ちゃんと解決できますよ。
まず、<body>タグってわかりますよね？
HTMLソースを見てみると、かならずある、
ホームページの内容を表示する要素を記述する範囲のことです。
これは、とくになーんも設定してないと、
自然とブラウザから一定の間隔をとるようにできています。
<H1>とかの見出しタグも、この<body>と同じような性質をもっていて、
なんにも設定してないと、下のように自然と間隔をとってしまいます。（下の例では、<H2>をつかってます）
ふつうのテキスト
<H2>で囲もうとしているテキスト
ふつうのテキスト
上の赤いテキストを<H2>で囲んであげると、
ふつうのテキスト
<H2>で囲こんだテキスト
ふつうのテキスト
こんなふうに、
<H2>で囲ったテキストの大きさだけ、上下に間隔をとります。（だいたい）
だから、ボックスを段組して、ふつうにテキスト書いて、
ここを<H1>とかで囲んで、見出しにしようって決めてじっさいにやってみると、
おいおい、かんべんしてよ、、、
みたいなことになっちゃうんですね。
で、この解決方法は、とてもかんたん。
練習問題をやってくれた方は、もちろんわかると思うけど、
間隔を定義する属性 marginで調節してあげれば良いのです。
定義方法は、下のような感じ。
H1 {margin: 0px}
間隔を0pxにしなさい、
上下左右にある要素から、1pxも離れちゃだめよっ！みたいな。（笑）
こういう指定をしてあげると、下のように表示されます。
ふつうのテキスト
<H2>で囲こんだテキスト
ふつうのテキスト
間隔が縮まりましたね。
ビミョーにあいてるけど、これは、行間を定義してるので、あしからず。
見出しタグにマージンを定義してあげる。
これで、レイアウトもくずれません。
