タブレット、デスクトップ用への変換

チュートリアルに従って練習をしていますが、「レスポンシブなグリッドレイアウトの作成方法」の「３.レスポンシブデザインを完成させる」の項で詰まりました。

モバイル用に縦一列にしている画像をタブレット用、デスクトップ用に2列、4列にする作業です。

まずタブレット用に「気になるトピック」「みんなの反響」を2列にする時、「.col-mid-half」をwidth:50%にし、float:leftにするところまでは、チュートリアル通り画像が半分のサイズになり2列になるのですが、padding:0px 7px 14pxを入力すると余白はできるのですが、半分のサイズのまま縦1列に戻ってしまいます。

試しにwidth:45%にすると2列になりましたが、やはりパーセンテージが違うのでアーバンストロークの画像と幅が合いません。デスクトップ用の4列にする画像も同様にwidth:23%以下でないと4列になりません。全てチュートリアル通りに行っております。

余白を作りつつ、列を複数にするにはどうしたらいいでしょうか？よろしくお願い致します。