Progate 道場コース　中級編　背景画像の高さ調整、ヘッダーの固定について

質問失礼いたします。
Progateの道場コース中級編をしております。
採点をしたところ、添付画像のように背景画像の高さが異なってしまっています。

heightなどで高さを調整しようとしても反映されません。

またヘッダーをposition:fixedでheaderを固定しますと左に寄ってしまいます。

解決方法を教えていただきたく存じます。
よろしくお願いします。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" href="stylesheet.css">
  <!-- ここでFont Awesomeを読み込んでください -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  
</head>
<body>
  <!-- ここにコードを書いていきましょう -->
  <header>
    <div class="content">
      <div class="header-left">
        <img src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
      <div class="header-right">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="content">
      <h1>LEARN TO CODE.</h1>
      <h1>LEARN TO BE CREATEVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
       <div class="botan">
         <a href="#" class="btn touroku">新規登録はこちら</a>
         <P>or</P>
         <a href="#" class="btn facebook">
           <span class="fa fa-facebook"></span>facebookで登録
           </a>
         <a href="#" class="btn twitter">
           <span class="fa fa-twitter"></span>twitterで登録
           </a>
       </div>
    </div>
  </div>
</body>
</html>

CSS

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */
body {
  color: white;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
}

.main {
  width: 1170px;
  margin: 0px auto 0px auto;
  padding: 180px 0 100px;
  text-align: center;
}

h1 {
  font-size: 45px;
  opacity: 0.7;
  letter-spacing: 5px;
  font-weight: bold;
}

p {
  opacity: 0.7;
}

.btn {
  display: inline-block;
  padding: 8px 24px 8px 24px;
  color: white;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.touroku {
  margin: 30px 0 15px 0;
  background-color: #239b76;
  opacity: 0.8;
}

.facebook {
  margin: 15px 10px 0 0;
  background-color: #3b5998;
  opacity: 0.8;
}

.twitter {
  background-color : #55acee;
  opacity: 0.8;
}

.fa {
  margin-right: 5px;
}

header {
  background-color: rgba(34, 49, 52, 0.9);
  height: 65px;
}

header img {
  width: 124px;
  padding: 20px 0 20px 50px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255,0.3);
  margin: 0 50px;
  height: 65px;
  transition: all 0.5s;
}

.login {
  margin: 20px;
  line-height: 65px;
  color: white;
}

.header-right:hover {
  background-color: rgba(255, 255, 255,0.5);
}

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

回答1件

ベストアンサー

heightなどで高さを調整しようとしても反映されません。

背景画像を指定している要素にheightを指定しましたか?
以下の記述を試してみてほしいです。

body {
  color: white;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;

  /* 追加 */
  background-position: center;　/* 画像を上下左右に中央配置 */
  height: 800px; /* 数値はダミーです。好きな値を指定してください。 */
  margin-top: 65px; /* ヘッダーの高さ、余白を設ける。<body>だと効かないかもしれません。 */
}

(なお、今回のシチュエーションでは、<body>に背景画像をしているのがあまりよくないような気もします。bodyの子要素、<headr>の下あたりに<div>を配置してそちらに指定したほうがよさそうに思えます。)

またヘッダーをposition:fixedでheaderを固定しますと左に寄ってしまいます。

こちらで解決すると思います。

CSS
1header {
2  background-color: rgba(34, 49, 52, 0.9);
3  height: 65px;
4
5  /* 追加 */
6  position: fixed;
7  top: 0;
8  left: 0;
9  width: 100%;
10}