画面両脇に空白ができてしまう

クリックしてもらうと分かると思うのですが、ホーム画面の両脇に縦の空白ができてしまいます。
対処法をお願いします。

html
1<!DOCTYEPE html>
2<html lang="ja">
3<head><!--head head head head head head head head head-->
4           <meta charset =utf-8 >
5           
6           <title>YesNote  </title>
7           
8            <link rel="stylesheet" type="text/ css" href="YesNote.css" >
9            <link rel="stylesheet" type="text/ css" href="normalize.css" >              
10 </head><!--head head head head head head head head head-->
11 
12  <div id="main">
13  
14  
15  
16  <!--body boby body body body body body body body body-->
17   <body link="#000000" vlink="#000000" alink="#000000">
18
19
20
21<!--header-->
22<div id=header>
23
24
25
26     
27
28
29
30<!--セレクションバーの線-->
31<div class = "upperLineLocate">
32   <hr noshade size="1" class="style1">    
33   </div>
34   
35   <div class = "downLineLocate">
36      <hr noshade size="1" class="style1">      
37      </div>
38      
39      
40      
41 <!--表示画面の背景色 灰色-->
42<div class="backGround">
43</div>
44
45
46</div><!--div id=main-->
47
48</body><!--body boby body body body body body body body body-->
49</html>
50
51

CSS
1
2@charaset "utf-8";
3
4html, body {
5    height:100%
6    
7}
8
9
10
11
12
13ul {text-align: center;}  
14a {display:block;width:120;}
15
16/*セレクトメニューを横一列*/
17ul {
18  display: flex;
19  justify-content: space-between;
20}
21li {
22  list-style-type: none;
23  background-color: #fff;
24  color: #000;
25}
26
27
28/*セレクトメニュー下の仕切り線*/
29hr.style1{
30    border-top:1px solid #d3d3d3
31}
32
33
34/*セレクトメニュー下の仕切り線*/
35hr.style1{
36    border-top:1px solid #d3d3d3
37}
38
39
40/*フォントの指定*/
41.font {
42    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"    
43}
44
45
46/*文字の色*/
47.textcolor{
48    color:#
49    
50}
51
52
53   /*セレクトメニューのアンダーラインを消す　下で再表示*/        
54 a { text-decoration:none}           
55 a:hover { text-decoration:underline;}           
56             
57             
58 /*セレクトメニュー ボタンの配置*/            
59.locate {position: relative; left: 10px; top:12px}
60             
61             
62/*高さを600pxに   styleを無効に*/ 
63 .now1
64 {list-style:none; width:600px;}
65 
66 
67/*セレクトメニューの線の位置*/
68.downLineLocate{position:relative; left: 0px; top:-50px; }
69
70.upperLineLocate{position:relative; left:0px; top:9px;}
71  
72  
73/*表示画面の背景色　灰色*/
74.backGround {background: #f5f5f5;  height:10000;  position: relative;top:-8px;}           
75        
76        
77        /*文字を大きくする*/     
78          .fontBig{font-size: large;}
79         
80         
81         /*position: relative; left: -8px; right:100px; top:5px;          */
82             
83             
84  /*ページ全体を中央揃いにする */
85    body{
86    	margin:0px;
87    	padding:0px;   
88    	text-align:center;    	 	}     
89    	
90    	
91    	#main{
92    		 margin-left:auto;
93    		 margin-right:auto; 
94    		  text-align:left;   
95    		  width:1000; 	
96    	          	}
97    	          	             
98             
99             #header{
100                width:100%;
101                padding: 60px 0;
102                background: #84A;                
103                
104             }

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

回答1件

ベストアンサー

CSS
1#main{  
2margin-left:auto;  
3margin-right:auto;   
4text-align:left;     
5/*width:1000;*//* これを削除 */
6}

vlink など、廃止された属性が使われているため、参考にされる書籍をもう少し新しいものにすることをお勧めします。

【body 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/body

投稿2017/12/24 09:56

kei344

総合スコア69407

NamaKori

2017/12/29 12:49

ありがとうございました！両脇の空白が埋まるようになりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

画面両脇に空白ができてしまう

関連した質問