bodyの中に収まらない

実現したいこと

模写コーディング練習をしています。
bodyの中にうまくほかの要素が収まってほしいです。

問題点、エラーメッセージ

いつものように、bodyの中にすべての要素を入れているつもりなのですが、なぜかほかの要素がbodyの範囲を逸脱してしまいます。。widthは100％でそろえています。
ディベロッパーツールの表示は以下です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="author" content="">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="style.css">
10    <title>Colerfl-clover</title>
11    <link rel="shortcut icon" href=" ">
12  </head>
13
14  <body>
15    <header>
16      <div class="container">
17        <h1><a href="#" alt="colorful clover"><img src="image/logo.png"></a></h1>
18        <ul>
19          <li><a href="#">Information</a></li>
20          <li><a href="#">Gourmet</a></li>
21          <li><a href="#">Contact</a></li>
22        </ul>
23     </div>
24    </header>
25
26    <div id="key-visual">
27      
28      <div class="container">
29        <img src="image/img_bg.jpg">
30      </div>
31    </div>
32
33    
34
35    <main>
36        <section class="information">
37
38          <h2>Information</h2>
39          <ul>
40            <li class=""><time datetime="2020.08.20">2020.08.20</time><p>「Webの神様｣ 動画UP！</p></li>
41
42            <li class="brown"><time datetime="2020.08.17">2020.08.17</time><p>｢Webの神様｣ 動画UP！</p></li>
43
44            <li><time datetime="2020.08.08">2020.08.08</time><p>夏季休業のお知らせ</p></li>
45
46            <li class="brown"><time datetime="2020.08.05">2020.08.05</time> <p>サイトをオープンしました！</p></li>
47          </ul>
48        </section>
49  
50       
51
52        <section class="gourmet">
53          <h2>Gourmet</h2>
54
55            <div class="item">
56              <figure>
57                <img src="image/img_top01.jpg">
58              </figure>
59              <div class="ttl">
60                <div class="area">
61                  <h3>トミガヤ テラス</h3>
62                  <ul>
63                    <li>渋谷</li>
64                    <li>代々木公園</li>
65                    <li>代々木八幡</li>
66                  </ul>
67
68                </div>
69              </div>
70                <p>チキンパエリア</p>
71            </div>
72  
73            <div class="item">
74              <figure>
75                <img src="image/img_top02.jpg">
76              </figure>
77              <div class="ttl">
78                <div class="area">
79                  <h3>  ボンジョリーナ</h3>
80                  <ul>
81                    <li>池の上</li>
82                    <li>下北沢</li>
83                    
84                  </ul>
85
86                </div>
87
88              </div>
89                <p> イタリアンランチ</p>
90            </div>
91
92  
93            <div class="item">
94              <figure>
95                <img src="image/img_top03.jpg">
96              </figure>
97              <div class="ttl">
98                <div class="area">
99                  <h3>揚州商人</h3>
100                  <ul>
101                    <li> 渋谷センター街</li>
102                  </ul>
103
104                </div>
105              </div>
106                <p>  スーラータンメン</p>
107            </div>
108  
109            <div class="item">
110              <figure>
111                <img src="image/img_top04.jpg">
112              </figure>
113              <div class="ttl">
114                <div class="area">
115                  <h3>カレー食堂 心</h3>
116                  <ul>
117                    <li> 下北沢</li>
118                  </ul>
119                </div>
120              </div>
121
122                <p>骨付きチキンのスープカレー</p>
123            </div>
124  
125            <div class="item">
126              <figure>
127                <img src="image/img_top05.jpg">
128              </figure>
129              <div class="ttl">
130                <div class="area">
131                  <h3>博多食堂</h3>
132                  <ul>
133                    <li>渋谷</li>
134                    <li>神泉</li>
135                  </ul>
136
137                </div>
138              </div>
139                <p>博多ラーメン </p>
140            </div>
141  
142            <div class="item">
143              <figure>
144                <img src="image/img_top06.jpg">
145              </figure>
146                    <div class="ttl">
147                      <div class="area">
148                        <h3>UeCONA</h3>
149                        <ul>
150                          <li>渋谷</li>
151                          <li>道玄坂</li>
152                        </ul>
153
154                      </div>
155                    </div>
156                <p>シカゴピザ</p>
157            </div>
158        </section>
159    </main>
160
161    <footer>
162      <ul>
163        <li><a href="#">Company</a></li>
164        <li><a href="#">Service</a></li>
165        <li><a href="#">Portfolio</a></li>
166        <li><a href="#">Blog</a></li>
167        <li><a href="#">Contact</a></li>
168      </ul>
169      <a href="#"><img src="image/logo.png" alt="colorful clover"></a>
170      <p>Copyright © Colorful Clover, inc. All Rights Reserved.</p>
171      
172      
173      
174      
175      
176      
177      
178
179    </footer>
180   
181
182
183  </body>
184</html>
185

css
1@charset="UTF-8"
2
3/*
4html5doctor.com Reset Stylesheet
5v1.6.1
6Last Updated: 2010-09-17
7Author: Richard Clark - http://richclarkdesign.com
8Twitter: @rich_clark
9*/
10
11html, body, div, span, object, iframe,
12h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13abbr, address, cite, code,
14del, dfn, em, img, ins, kbd, q, samp,
15small, strong, sub, sup, var,
16b, i,
17dl, dt, dd, ol, ul, li,
18fieldset, form, label, legend,
19table, caption, tbody, tfoot, thead, tr, th, td,
20article, aside, canvas, details, figcaption, figure,
21footer, header, hgroup, menu, nav, section, summary,
22time, mark, audio, video {
23    margin:0;
24    padding:0;
25    border:0;
26    outline:0;
27    font-size:100%;
28    vertical-align:baseline;
29    background:transparent;
30}
31
32body {
33    line-height:1;
34}
35
36article,aside,details,figcaption,figure,
37footer,header,hgroup,menu,nav,section {
38    display:block;
39}
40
41nav ul {
42    list-style:none;
43}
44
45blockquote, q {
46    quotes:none;
47}
48
49blockquote:before, blockquote:after,
50q:before, q:after {
51    content:'';
52    content:none;
53}
54
55a {
56    margin:0;
57    padding:0;
58    font-size:100%;
59    vertical-align:baseline;
60    background:transparent;
61}
62
63/* change colours to suit your needs */
64ins {
65    background-color:#ff9;
66    color:#000;
67    text-decoration:none;
68}
69
70/* change colours to suit your needs */
71mark {
72    background-color:#ff9;
73    color:#000;
74    font-style:italic;
75    font-weight:bold;
76}
77
78del {
79    text-decoration: line-through;
80}
81
82abbr[title], dfn[title] {
83    border-bottom:1px dotted;
84    cursor:help;
85}
86
87table {
88    border-collapse:collapse;
89    border-spacing:0;
90}
91
92/* change border colour to suit your needs */
93hr {
94    display:block;
95    height:1px;
96    border:0;  
97    border-top:1px solid #cccccc;
98    margin:1em 0;
99    padding:0;
100}
101
102input, select {
103    vertical-align:middle;
104}
105/*END Reset CSS*/
106body{
107  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
108}
109header{
110  height: 60px;
111  width:100%;
112  position: fixed;
113  background-color: white;
114}
115header .container{
116  width: 100%;
117  position: relative;
118}
119header .container h1{
120  display: inline-block;
121  height: 30px;
122  width: 200px;
123  margin: 0%;
124  position: absolute;
125  top: 20px;
126  left: 15px;
127}
128header .container h1 img{
129  width: 100%;
130}
131header .container ul{
132  display: inline-block;
133  list-style: none;
134  margin: 0%;
135  padding: 0%;
136  float: right;
137}
138
139div#key-visual{
140  width: 100%;
141  padding-top: 60px;
142}
143
144 #key-visual img{
145   display: block;
146    width: 100%;
147    margin: 0 auto;
148}
149
150main{
151  width: 100%;
152  margin: 0 auto;
153}
154.information h2{
155  width: 100%;
156  padding:10px 12px;
157  margin: 0%;
158  background-color: #B99566;
159  color: white;
160  font-weight: normal;
161  font-size: inherit;
162}
163.information ul li::nth-child(even) {
164  background-color:#ff9;
165}
166.information .brown{
167  background-color: #F5F3F0;
168}
169.information p{
170  margin:0;
171  font-size: 14px;
172}
173.information p::before{
174  content: "▶";
175}
176.information ul{
177  width:100%;
178  list-style: none;
179  padding-inline-start: 0%;
180  margin:0px ;
181}
182.information li{
183  padding: 5px 10px;
184  line-height: 1.7;
185}
186.information ul li time{
187  display: block;
188  font-size: 10px;
189}
190
191
192
193body{
194  margin: 0%;
195  width: 100%;
196}

kuma_kuma_

2020/10/06 02:58

CSSが2種類指定されていますが("responsive.css","style.css") 質問者様が書かれたCSSはどちらに該当しますか？あとHTML上画像のサイズ指定を行っておいて下さいこちらでまったく同じ画像を用意できないのでせめてサイズが判らないと判断できません。あとCSSはsass やscssを変換されたものでしょうか？

Sakupi

2020/10/06 03:57

返信ありがとうございます！情報が少なく、申し訳ありません。 "style.css"の段階で質問させていただきました。画像のサイズは、width100％の指定だけでは不十分ということでしょうか？ scssの記法を使っていると思います。

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

回答1件

ベストアンサー

こんにちは。

h2要素のマージンの影響で、はみ出しているようです。
以下のようにしてみてはいかがですか？

CSS
1.information h2 {
2	box-sizing: border-box;
3}

参考：
box-sizing - CSS: カスケーディングスタイルシート | MDN

あと、リセットCSSの使用を検討した方がいいかもしれません。

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

投稿2020/10/06 03:16

編集2020/10/06 03:19

Lhankor_Mhy

総合スコア36149

Sakupi

2020/10/06 03:58

回答ありがとうございました！きちんとbodyの中にすべて収まりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！