エディターとgooglechromeで表示が違う

エディターのプレビューで見た場合と、GoogleChromeで見た場合の表示が違うのですが、何がいけないのでしょうか？
加えて、何故かGoogleChromeのデベロッパーツールを開くと、エディターと同じような見た目になります。
下の画像にある「プログラミングで人生の～」の要素の位置がおかしく、右側に空白まで生まれてしまうんです。
「↓GoogleChrome」

「↓Atomエディター」

「↓デベロッパーツールを開いたとき」

HTML
1<!DOCTYPE html>
2 <head>
3  <meta charset="utf-8">
4  <title>ISARA</title>
5  <link rel="canonical" href="URL">
6<link rel="stylesheet" href="kkk.css">
7</head>
8 <body>
9  <header>
10    <a><img class="header-logo" src = "ISARA.img/isaralogo.png" alt = "header-logo" title = "header-logo"></a>　　
11    <p class="heading">バンコクのノマドエンジニア育成講座</p>
12    <a class="inquiry">お問い合わせ/資料請求はこちら</a>
13  </header>
14  <main>
15　　<h1>プログラミングで</br>人生の安定を手に入れよう</h1>　
16    <p><img class="main-img" src="ISARA.img/main.jpg"></p>
17    <p><img class="main-logo" src="ISARA.img/isaralogolarge.png"></p>
18    <h2>バンコクのノマドエンジニア育成講座</br>iSara[イサラ]<h2>
19  </main>
20  <div class="container">
21   <p>まずは2日間で、</br>月10万円を稼げるスキルを手に入れよう。</P>
22   <p>※受講料金は実質０円です。詳しくは資料請求をどうぞ。
23  </div>
24</body>

CSS
1body {
2 width: 1263px;
3 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
4 margin: 0;
5 }
6header{
7 height: 75px;!important
8 padding-top: 14px;
9 position:fixed;
10 background-color:#FFFFFF;
11 width:100%;
12}
13
14.heading{
15 position: absolute;
16 top: 25px;
17 bottom: 57px;
18 left: 180px;
19 font-size: 14px;
20 line-height: 16px;
21}
22
23.header-logo{
24 position: absolute;
25 top:14px;
26 bottom:58px;
27 left: 46px;
28 width: 128px;
29 height: 44px;
30}
31.inquiry{
32 cursor:pointer;
33 font-size:14px;
34 text-align: center;
35 background-color: #DA6B64;
36 padding:11px 0px;
37 color:#E8E7EF;
38 border-radius: 20px;
39 position:absolute;
40 top: 16px;
41 left: 899px;
42 width: 317px;
43 font-weight: 300px;
44 line-height:22px;}
45.inquiry:hover{
46background-color:#D84940;
47}
48.main-img{
49 width: 100%;
50 height: 500px;}
51main h1{
52  width: 100%;
53  text-align: center;
54  position:absolute;
55  top:25%;
56  left: 50%;
57line-height: 45px;
58font-size:28px;
59}
60.main-logo{
61  position:absolute;
62  top:276px;
63  left: 473px;
64  width: 317px;
65  height: 111px;
66}

kei344

2019/11/11 14:47

なぜimg要素に対してbackground-imageを指定しているのでしょうか。

chair

2019/11/12 13:55

すいません。消そうと思っていて忘れていました。削除し、編集致しました。

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

回答2件

表示が異なるのは画面の横幅の違いによるものだと思います。
また、背景画像をHTMLのコードの中から指定しているように見受けられますが、背景画像として使いたいのならばCSSの方で指定します。

CSS
1main {
2    background-image: url(画像のパス);
3    background-size: cover;
4    background-position: center;
5}

投稿2019/11/12 14:14

NAOPI-05

総合スコア132

chair

2019/11/13 16:05

HTMLのimg要素を消し、上記のコードをＣＳＳに書いたところ、画像が表示されませんでした。 <body>にて、widthを指定していても、画面の横幅の違いの影響を受けてしまうのでしょうか？

NAOPI-05

2019/11/13 17:31

main に何かしら要素は入っていますか？何も入ってないと高さが無い状態ですので背景が表示されません。また、画像のパスの指定は間違っていませんか？相対パスで指定しているならば、CSSのファイルから見た位置になります。それと、基本的にbodyには横幅は指定しません。特にいじらない方がいいです。初期設定では画面幅いっぱいに表示されるようになっています。

chair

2019/11/14 13:51

解決しました。回答して頂きありがとうございました。

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

ベストアンサー

CSS
1main h1{
2  /*width: 100%;*//* DELETE */
3  text-align: center;
4  position:absolute;
5  top:25%;
6  left: 50%;
7line-height: 45px;
8font-size:28px;
9  transform: translateX(-50%);/* ADD */
10}