HTMLの実行結果が教材通りに反映されません。

前提・実現したいこと

いつもお世話になっております。
たにぐちまこと著の『これからWebをはじめる人のHTML&CSS、JavaScriptのきほん』
のChapter3をやっております。そして、そのコードを正確に写経し、実行できれば
下記の画像のようになります。

発生している問題・エラーメッセージ

私が書いたコードを実行したところ以下の画像になります。
私のコードでは絵が中央にきてしまい、文章が下にきます。

該当のソースコード

HTML CSS
ソースコード

HTMLファイル

<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="stylesheet2.css"> <meta charset="UTF-8"> <title>イヤホンジャックの向こう側</title> <meta name="viewport" content="width=device-width"> </head> <body> <div class="container"> <header> <h1>COCOA</h1> </header> <section class="information"> <h1>イヤホンジャックの向こう側</h1> <p class="type">Album</p> <img src="jacket.png"> <p>COCOA４枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラシュンシ」氏を迎え、音楽と絵のコラボを実現させた一枚。</p> <p>HONDA CARS 静岡CM タイアップの「キミのうた」をはじめ、完全書き下ろしの新曲３曲を含む全６曲を収録。<br> イヤホンジャックの向こう側に広がる世界を、ぜひご堪能ください。　　　</p> </section> </div> </body> </html>

CSSファイル

@import url(sanitize.css);

body{
background-color: #f0f0f0;
padding: 10px;
font-size: 14px;
color: #666;
}

.container{
width: 800px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

header{
background-color: #422814;
padding: 10px;
color: #fff;
}

.description img{
float: left;
margin: 0 10px 50px 0;
}

.information h1{
font-size: 18px;
margin: 0 10px 10px 0;
float: left;
}

.information .type{
display: inline;
background-color: #E35A4D
padding: 3px 5px;
font-size: 80%;
color: #FFF
}

.description{
clear: left;
}