フッターを下に表示したい

コーディングの練習を行っている者です。
フッターが何故かこの「about」の所まで来てしまいます。
修正を試みましたが、どうもうまくいきません。どなたかご教示をお願い致します。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pasutayasan</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href=stylesheet.css> </head> <body> <header> <div class="header-logo"><a href=""><img src="logo.png"></a> <div class="header-list"> <ul> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> </ul> </div> </div> </header>

<main>
  <div class="mv">
          <a href=""><img src="mainvisual.png"></a>
  </div>
  <section class="menu">
      <h2>Menu</h2>
        <div class="item_box">
            <ul>
            
                <li>
                <img src="menu_img1.png">
                 <h3>Menu1</h3>
                <p>We are excellent.</p>
                </li>
                 
                
             
                <li>
                <img src="menu_img2.png">
                <h3>Menu2</h3>
                <p>We are excellent.</p>
                </li>
               
                    
                
                <li>
                <img src="menu_img3.png">
                <h3>Menu3</h3>
                <p>We are excellent.</p>
                </li>
               
            </ul>
        </div>
  </section>
    
  <section class="about">
        <h2>About</h2>
      <div class="about_box">
              <img src="about_img.png">
      
          <div class="about_description">
          <h2>Lorem ipsum dolor sit<br>
              amet,consectetur</h2>
          <p>adipiscing elit,sed do eiusmod<br>
             tempor incidedunt ut labore et dolore</p>
          <a href="#" class="button">MORE</a>
          </div>
        </div>
  </section>
</main>
  
    <footer>
        (c)2020 good pasta
  </footer>

</body> </html>

CSS

@charset "UTF-8";

body{
margin: 0;
padding: 0;
color: black;
font-size: 15px;
}

a{
color:black;
}

a:visited{
color:#d8bfd8;
}

a:hover{
color:#dda0dd;
font-weight:700;
text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}

p {
margin-top: 0;
line-height: 1.8;
}

header{
width: 1032px;
height: 85px;
margin: 0 auto;
}

.header-logo{
padding-top:15px;
padding-left: 12px;
padding-bottom: 15px;
}

.header-list{
float: right;
padding-right:12px;
padding-bottom: 15px;
}

.header-list ul li{
display:inline-block;
width: 65px;
justify-content: space-between;
}

main{
width: 1032px;
height: 900px;
margin: 0 auto;
}

main img{
height: 483px;
}

.menu h2{
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline red;
font-size: 30px;
}

.item_box ul{
display: flex;
justify-content: space-between;
padding-left: 0;

}
.item_box ul li{
display:inline-block;
text-align: center;
}

.item_box img{
width: 250px;
height: 200px;
}

.item_box ul li h3{
margin-bottom: 0;
}

.item_box{
padding: 0 100px;
}

.about > h2{
text-align: center;
text-decoration: underline red;
font-size: 30px;
padding-bottom: 45px;
padding-top: 30px;
margin-bottom: 0;
}

.about_description h2{
font-size: 25px;
margin-left: 40px;
justify-content: space-between;
flex:direction:column;
}

.about_description p{
font-size: 20px;
margin-left: 40px;
padding-right: 40px;
}

.about_description a{
font-size: 20px;
margin-left: 40px;
background: #fff;
color:#ff0000;
border: solid 3px #ff0000;
border-radius:20px 20px 20px 20px;
display: block;
width: 105px;
height: 30px;
text-align: center;
text-decoration:none;
padding:0 15px;

}

.about_box img{
width: 400px;
height: 260px;
padding-right: 100px;
padding-bottom:150px;
}

.about_box{
margin-left: 40px;
display: flex;
flex-direction:row-reverse;

}

footer{
color: white;
background-color:gray;
text-align:center;
margin: 0 auto;
}

Lhankor_Mhy

2020/10/13 03:10

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

Lhankor_Mhy

2020/10/13 03:12

マルチポストです。 https://teratail.com/questions/297209 > teratailでは、マルチポスト※の推奨はしていません。 https://teratail.com/help#posted-otherservice > 質問への回答とは、余程初歩的な問題でない限り、それなりに時間が必要となる行為である。より良い回答をしようと丁寧に調べ上げてから文章に推敲を重ねた上で回答してくれるユーザも少なくない。マルチポストはそんな回答者の親切心を裏切る行為である。 https://dic.nicovideo.jp/a/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88 > マルチポストだと指摘されました。どうすればいいですか？ > 質問文を編集して、マルチポストしていることを説明してください。 https://ja.meta.stackoverflow.com/questions/2418/ > また、マルチポストはマナー違反であるという意見については賛否両論である。 https://ja.wikipedia.org/?curid=46419

hatena19

2020/10/13 03:29

https://teratail.com/questions/297209 の続きですが、まるっきり同じというわけではないのでマルチボスとではないと思います。前回の回答での floatではなく Flexbox で横並びさせた方がいいとアドバイスを受けて、Flexbox の横並びに変更していますので。

Lhankor_Mhy

2020/10/13 03:31

なんだこれ、退会するの早くない？「teratailで回答者に絡まれたら即退会してアカウントを作り直しましょう。ノーペナルティです」とか指南してるスクール講師崩れでもいるのかな？

Lhankor_Mhy

2020/10/13 03:34

>hatena19さんなるほど、そういうことでしたか。

hatena19

2020/10/13 03:36

あら、回答したら退会済みでした。なんと打たれ弱い、、、

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

回答2件

mainに設定した height: 900px; を削除してください。
mainの中身に関係なく上から900pxの位置にfooterが来てしまいます。

css
1main{
2width: 1032px;
3/*height: 900px; 削除 */
4margin: 0 auto;
5}

投稿2020/10/13 03:34

hatena19

総合スコア33790

手元で再現してみたところ、footerが下に配置されていますよ。

おそらく、キャッシュが原因ではないでしょうか。

以下を参考にしてみてください。
https://xov.jp/e/252/

投稿2020/10/13 03:35

shibachi

総合スコア19

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

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

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

フッターを下に表示したい

HTML

CSS

関連した質問