html5&css3を勉強中です実行結果が思うようにいかないので、教えてください

コードを実行すると以下のように表示されます

上の実行結果で「nav」の背景画像を「title」の画像の下に表示したいのですが、うまくいきません。
「title」の画像を「container」の幅まで伸ばして、その下で「nav」の背景画像を止めたいのです。
よろしくお願いいたします。

HTML
1//index.html
2<!DOCTYPE>
3<html>
4<head>
5    <meta charset="utf-8" />
6    <title>Osteria Grazie［イタリア料理の店］</title>
7    <link href="style.css" rel="stylesheet">
8    <link href="nav.css" rel="stylesheet">
9    <link href="index_layout.css" rel="stylesheet">
10</head>
11<body>
12<div id="container">
13
14<header>
15<h1><img src="images/title.png" alt="Osteria Grazie" width="420" height="90" /></h1>
16</header>
17
18<div id="nav">
19<h3>information</h3>
20<ul>
21  <li><a href="info.html">店舗紹介</a></li>
22</ul>
23<h3>menu</h3>
24<ul>
25  <li><a href="#">ランチ</a></li>
26  <li><a href="menu.html">ディナー</a></li>
27  <li><a href="menu.html">アラカルト</a></li>
28</ul>
29<h3>recipe</h3>
30<ul>
31  <li><a href="recipe.html">豚の背肉グリル</a></li>
32  <li><a href="#">ティラミス</a></li>
33</ul>
34<h3>contact</h3>
35<ul>
36  <li><a href="message.html">ご意見ご要望</a></li>
37  <li><a href="#">メール</a></li>
38</ul>
39</div>
40
41<div id="contents">
42<img src="images/top2.jpg" alt="料理の写真" width="380" height="240" />
43<h2>Welcome to Osteria Grazie</h2>
44<p><span id="osteria">オステリア・グラッツェ</span>へようこそ！グラッツェとは<span class="italia">イタリア</span>語で「ありがとう」という意味です。
45本場<span class="italia">イタリア</span>で修行したシェフの味を、是非一度お試しください！</p>
46</div>
47
48<div id="footer">
49<p id="copyright"><small>Copyright (C) 2014 Osteria Grazie. All Rights Reserved.</small></p>
50</div>
51
52</div>
53</body>
54</html>

css
1//index_layout.css
2@charset "utf-8";
3#container {
4	margin: 20px auto;
5	padding: 0;
6	width: 680px;
7	background: url(images/back_stripe.png) repeat-y;
8	border: solid 1px #666666;
9}
10#header {
11	background: url(images/top_img.png) no-repeat right top;
12}
13#nav {
14	width: 160px;
15	float: right;
16}
17#contents {
18	width: 520px;
19	float: left;
20}
21#footer {
22	clear: both;
23}
24```ここに言語を入力
25
26```css
27//nav.css
28@charset "utf-8";
29
30
31#nav {
32	text-align: left;
33}
34#nav img {
35	margin: 0;
36	padding: 0 0 90px 0;
37}
38#nav h3 {
39	margin: 0 10px;
40	padding: 2px 5px;
41	background-color: #525247;
42	color: #ffffff;
43}
44#nav ul {
45	font-size: small;
46	margin: 10px 20px;
47	padding: 0 10px;
48}
49#nav li {
50	list-style-type: none;
51	line-height: 1.5em;
52}
53#nav a {
54	text-decoration: none;
55	color: #333333;
56}
57#nav a:hover {
58	color: #ff6600;
59}
60

css
1//style.css
2@charset "utf-8";
3
4body {
5	color: #666666;
6	text-align: center;
7	background-color: #ffffff;
8	margin: 0;
9	padding: 0;
10}
11#contents {
12	margin: auto;
13}
14h1 {
15	background-color: #5c8f13;
16	margin: 0 160px 30px 0;
17	padding: 0 50px;
18}
19h2 {
20	font-size: 20px;
21	color: #ffffff;
22	font-family: "Courier New", Courier, monospace;
23	background-color: #ff9900;
24	margin: 20px 50px 0 50px;
25}
26#contents p {
27	text-align: left;
28	border-bottom: dotted #ff9900 4px;
29	border-left: dotted #ff9900 4px;
30	border-right: dotted #ff9900 4px;
31	margin: 0 50px 20px 50px;
32	padding: 15px;
33}
34p#copyright {
35	border-style: none;
36	padding: 0;
37	margin: 0;
38}
39#footer {
40	background-color: #5c8f13;
41	color: #ffffff;
42	padding: 5px 100px;
43}
44span#osteria {
45	font-weight: bold;
46}
47span.italia {
48	font-style: italic;
49    font-family:Times New Roman,"ＭＳ Ｐゴシック";
50}
51
52
53

kei344

2019/03/02 14:36

（質問文は編集できます）質問文のコード（HTML/CSS）はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

退会済みユーザー

2019/03/02 14:55

こんな感じでいいでしょうか。

kei344

2019/03/02 15:01

そうですね、ちなみにコードブロックの開始部分を「```HTML」「```CSS」にすると言語にあわせたコードハイライトも利用出来ます。

退会済みユーザー

2019/03/02 15:08

ありがとうございます。助かりました

行動規範の内容に同意します

回答2件

h1 {
    background-color: #5c8f13;
　　//↓消す
    margin: 0 160px 30px 0;
    //追加
    margin: 0;
    padding: 0 50px;
}

#nav {
    width: 160px;
    float: left ;
}
#contents {
    width: 520px;
    float: left;
}

titleをcontainerの幅までのばすのなら、h1のmarginは不要のはずです。消すだけだとh1のデフォルトのmarginがかかってしまうので、全て0にしておきます。

また、floatは両方leftにしておきましょう。

投稿2019/03/02 15:07

yu-smc

総合スコア610

退会済みユーザー

2019/03/02 15:16

ありがとうございました。助かりました。今日半日苦戦しました。

退会済みユーザー

2019/03/02 15:19

すみません、ついでに評価をつけるとき、1でなく2とか3にするにはどうするのでしょうか。

yu-smc

2019/03/02 15:33

ブラウザ開発者ツールでそれぞれの要素のCSSを確かめながらやっていくと時間かからず実装できますよー。評価付けは一人1回までになってます！

退会済みユーザー

2019/03/02 17:36

よくわからないです

dit.

2019/03/04 01:47

勝手に補足します。「開発者ツール（デベロッパーツールともいう）」というブラウザの機能を使うと、どこにどんなスタイルが効いているのかわかるので、便利ですよという提案です。詳しい使い方はご自身の使っているブラウザの名称+開発者ツール（デベロッパーツール）で検索してみてください。評価は一人1回のみ、1点までです。レビューサイトの「私はこの店に★３つつけました」みたいなものではなくSNSによくある「いいね」みたいなものです。

退会済みユーザー

2019/03/04 07:14

そうなんですね。ありがとうございます。初心者で、HTML5 &css3を参考書で勉強中なのでとりあえず前に進みます。開発者ツール（デベロッパーツールともいう）」というブラウザの機能の使い方はまたにします。

行動規範の内容に同意します

ベストアンサー

こういう事？

CSS
1h1 {
2    background-color: #5c8f13;
3    /* margin: 0 160px 30px 0; */
4    margin: 0 0 30px 0;
5    padding: 0 50px;
6}
7```**動くサンプル：**[https://jsfiddle.net/bwacpkqe/1/](https://jsfiddle.net/bwacpkqe/1/)