次にパーツ同士の横方向の間隔を調整します。
記事（<article>）とサイドメニュー（<aside>）の間隔が詰まりすぎて見にくいです。間隔を調整するために、<article> の右側に 50ピクセルの余白（padding）を設定します。
記事とサイドメニューが密着しており、見にくいです。
ただしこの設定が必要になるのは、記事とサイドメニューを横並びに並べた時だけなので、設定は @media (min-width:768px) {～} の範囲内に記入します。
しかし現状では、指定通りに単純に余白を挿入すると、レイアウトが崩れてしまいます。
@media (min-width:768px) {
/* 横に並べる設定 */
.wrap:after { content: "";
display: block;
clear: both; }
article { float: left;
width:70%; }
aside { float: left;
width:30%; }
/* 横方向の間隔調整 */
article { padding-right: 50px; }
}
記事とサイドメニューのレイアウト崩れ。
（右側にあったメニューが下に回り込んでいます）
レイアウトが崩れた原因は、width で指定した横幅に padding-right などで設定した余白サイズが含まれないためです。
<article> の width が 70%、<aside> の width が 30% で合計 100% ですが、ここに余白（padding）が50px足されると 100% をオーバーしてしまいます。そのため、余白によって右に押し出され、横幅が足りなくなった結果、下に回り込んだのです。
そのような場合は box-sizing プロパティに border-box という値を設定すると、横幅に余白（padding）や罫線の幅も含めて計算されるようになるため、レイアウトの崩れを防げます。（ただし margin だけは計算に含まれず、指定幅の外側に余白確保されます）
上の図では、文字の幅と両端の余白（padding）を含めたものが、指定の70%幅に収まっている様子が分かります。
このようにbox-sizing:border-box; 設定を追加すると、余白（padding）と罫線を含めて指定幅に収まるようになるのです。
@media (min-width:768px) {
/* 横に並べる設定 */
.wrap:after { content: "";
display: block;
clear: both; }
article { float: left;
width:70%; }
aside { float: left;
width:30%; }
/* 横方向の間隔調整 */
article { padding-right: 50px;
box-sizing: border-box; }
}
サイドメニューと記事の間に隙間ができつつ、正しいレイアウトで表示されるようになりました。
ボックスのサイズを余白を含めて厳密に決めたい場合は、上のようにbox-sizing:border-box; 設定を追加すると良いでしょう。
参考
ちなみに以前のCSS練習１では、このサイズ調整を全ての要素 * に対して有効にするために、CSSで以下のように記述している課題がありました。
この設定をCSSの最初にとりあえず書き込んでおけば、上記のような padding が絡んだときのサイズのズレを全て無くせます。
とりあえず設定しておいて損はない、わりとポピュラーな設定だったりします。