ヘッダーの基本レイアウト | The basic layout of the header is explained here.

ヘッダー画像を表示したレイアウト

ヘッダー画像は親要素の横幅に合わせて表示します。

SITE

キャッチフレーズ

HTML <div class=”header”>
<h1><a href=”#”>SITE</a></h1>
<p>キャッチフレーズ</p>
<img src=”header.jpg” alt=”” class=”photo”></a></h1>
</div>

CSS .header {
padding: 20px;
background-color: #9eb5d1;
}
.header h1 {
margin:0;
font-size: 20px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header p {
margin: 8px 0 0 0;
font-size: 12px;
line-height: 1;
}
.header .photo {
max-width: 100%;
height: auto;
margin: 10px 0 0 0 ;
vertical-align: bottom
}

横幅はwidthでなくmax-widthにし、画像のオリジナルサイズ以上に拡大されないようにしています。

画像下の余白を削除するためvertical-align: bottomと指定しています。

この本から引用、参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。