フッターのリストを縦並べにしたい

ProgateのHTML＆CSSを練習しているのですが、フッターのリストを右端に寄せて、縦並びにしたいのに縦並びになりません。どうしたらなりますでしょうか。

HTML
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8  </head>
9  <body>
10    <!-- ここからHTMLを書き始めてください -->
11    <div class="header">
12     <div class="header-logo">Progate</div>
13     <div class="header-list">
14    <ul>
15      <li>プログラミングとは</li>
16      <li>学べるレッスン</li>
17      <li>お問い合わせ</li> 
18    </ul>
19    </div>
20    </div>
21    <div class="main">
22    <div class="copy-container">
23      <h1>HELLO WORLD<span>.</span></h1>
24      <h2>プログラミングの世界へようこそ</h2>
25      </div>
26      <div class="contens">
27      <div class="section-title">
28        <h3>学べるレッスン</h3>
29      </div>
30    <div class="contens-item">
31      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
32      <p>HTML & CSS</p>
33    </div>
34    <div class="contens-item">
35      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
36      <p>PHP</p>
37    </div> 
38    <div class="contens-item">
39       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
40      <p>Ruby</p> 
41    </div>
42    <div class="contens-item">
43      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">  
44      <p>Swift</p> 
45        </div>
46       </div>
47    </div>
48    <div class="contact-form">
49     <div class="section-title">
50       <h3>お問い合わせ</h3>
51       <p>メールアドレス(必須)</p>
52       <input>
53       <p>お問い合わせ内容(必須)</p>
54       <textarea></textarea>
55       <p>※必須事項は必ずご入力ください。</p>
56       <input class="contact-submit" type="submit" value="送信">
57     </div> 
58    </div>
59    <div class="footer">
60     <div class="footer-logo">Progate</div>
61       <div class="footer-list">
62        <ul>
63          <li>会社概要</li>
64          <li>採用</li>
65          <li>お問い合わせ</li>
66        </ul> 
67       </div>
68     </div> 
69  </body>
70</html>

CSS
1コード
2li {
3  list-style: none;
4  padding: 33px 20px;
5}
6
7/* ここからCSSを記述してください */
8body{
9  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
10
11}
12
13.header{
14  background-color:#26d0c9 ;
15  height: 90px;
16  color: white;
17}
18
19.header-logo{
20  font-size: 36px;
21  float: left;
22  padding: 20px 40px;
23}
24
25.header-list li{
26float: left;
27}
28
29.main{
30  padding:100px 80px;
31}
32
33.copy-container h1{
34  font-size: 140px;
35  
36} 
37
38.copy-container h2{
39  font-size: 60px;
40  margin-bottom: 100px;
41}
42
43span{
44  color: red;
45}
46
47.section-title h3{
48  font-size: 28px;
49  padding-bottom: 15px;
50  border-bottom: 2px solid #dee7ec;
51  margin-bottom: 50px;
52}
53
54.contens{
55  height: 500px
56}
57
58.contens-item {
59float: left;
60margin-right: 40px;
61}
62.contens-item p{
63  margin-top: 30px;
64  font-size: 24px;
65}
66
67input,textarea{
68  width: 400px;
69  padding: 20px;
70  margin-top: 10px;
71  margin-bottom: 30px;
72  font-size: 18px;
73  border: 1px solid #dee7ec;
74}
75
76.contact-submit{
77  font-size: 18px;
78  background-color: #dee7ec;
79  color: #889eab;
80}
81
82.contact-form{
83  padding: 80px;
84  padding-top: 0;
85}
86
87.footer{
88  height: 200px;
89  color: #fff;
90  background-color: #2f5167;
91}
92
93.footer-logo{
94  font-size: 32px;
95  margin: 40px;
96  padding-top: 40px;
97}
98
99.footer-list li{
100padding-bottom: 20px;
101float: right;
102}

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

回答1件

ベストアンサー

これでどうでしょう。

CSS
1.footer-list li{
2padding-bottom: 20px;
3/*float: right;*/
4float: none;/*ADD*/
5}

投稿2018/09/20 11:41

kei344

総合スコア69407

kikoko09

2018/09/20 11:49

ご回答頂きありがとうございます。すみません、説明が足りなかったのですがフッターリストを右端に寄せて、縦並びにしたいのですがfloat: right;を入れると、横並びになってしまうんです。

kei344

2018/09/20 11:50

.footer-list { float: right; } これをさらに追加で。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

フッターのリストを縦並べにしたい

関連した質問