headerが表示されない

headerがmain-image-wrapperに重なって出力されてしまいます
headerだけで実行した場合はうまく行くのですが何がおかしいのでしょうか

タグが入れ子になっていないかは確認して、調べましたがわかりません

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mosha2.css">
   
    <title>Document</title>
</head>
<body>
    <header>
         <div class="container">
              <div class="header-left">
                <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
              </div>
              <div class="header-right">
                <a href="#" class="login">ログイン</a>
              </div>
            </div>
    </header>
    
    <section class="main-image-wrapper">
        <div class="main-image-container">
            <div class="face-image"></div>
            <div class="price-image"></div>
        </div>
    </section>
</body>
</html>

.header {
        height: 120px;
        width: 100%;
        background-color: rgba(34, 49, 52, 0.9);
      }
      
      .logo {
        width: 124px;
        margin-top: 20px;
      }
      
      .header-left {
        float: left;
      }
      
      .header-right {
        float: right;
        background-color: rgba(255, 255, 255, 0.3);
        transition: all 0.5s;
      }
      
      .header-right:hover {
        background-color: rgba(255, 255, 255, 0.5);
      }
      
      .header-right a {
        line-height: 65px;
        padding: 0 25px;
        color: white;
        display: block;
      }
      


.main-image-wrapper {
    background-image: url(https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/bg-cover-pc.jpg);
    background-size:cover;
    width: 1400px;
    height:500px;
}

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

回答1件

ベストアンサー

.header-leftクラスと.header-rightクラスにfloatプロパティが設定されているので、それらを表示しても中央部分に空きがあると、後続の要素(ここではsection要素)の内容がそこに表示されてしまいます。

それを防ぐには、後続のsection要素のスタイルにclear: both;を設定してください。

CSS
1.main-image-wrapper {
2    clear: both;
3    (略)
4}

投稿2020/10/21 14:47

編集2020/10/21 15:19

Daregada

総合スコア11990

sige2232

2020/10/22 01:19

arigatougozaimasu!!!!

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

headerが表示されない

関連した質問