Progate　HTML＆CSS道場　初級編　footerについて

前提・実現したいこと

ProgateでHTML＆CSSの学習をしているのですが、道場コース初級編でfooterのところで躓いています。
footerのリストを立てに箇条書きにして文字の間隔を調整したいのですが反映されず困っています。同じことで困っている方々の質問を見たのですが解決できなかったので質問させていただきました。

発生している問題・エラーメッセージ

エラーメッセージ

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

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

li {
  list-style: none;
  float:left;
  padding:33px 20px;
}

/* ここからCSSを記述してください */
header{
  background-color:#26d0c9;
  height:90px;
  color:#fff;
}
.header-logo{
  float:left;
  font-size:36px;
  padding:20px 40px;
}
main{
 margin:100px 80px 0 80px;
}
.copy-container h1{
  font-size:140px;
}
.copy-container h2 {
  font-size:60px;
}
.copy-container span {
  color:#ff4a4a;
}
h3{
  border-bottom:2px solid #dee7ec;
  font-size:28px;
  padding-bottom:15px;
  margin-bottom:50px;
}
.contents{
  height:500px;
  margin:100px 0;
}
.contents-item{
  float:left;
  margin-right:40px;
}
.contents-item p{
  font-size:24px;
  padding-top:30px;
}
.contact-from{
  margin:100px 0;
}
input,textarea{
  margin-top:10px;
  margin-bottom:30px;
  padding:20px;
  width:400px;
  border:1px solid #dee7ec;
}
.contact-submit{
  background-color:#dee7ec;
  font-size:18px;
  color:#889eab;
}
footer{
  height:120px;
  padding:40px;
  background-color:#2f5167;
  color:#fff;
}
.footer-logo{
  font-size:32px;
  float:left;
}
.footer-list li{
  float:none;
}
.footer-list{
  float:right;
  padding-bottom:20px;
  
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- ここからHTMLを書き始めてください -->
    <header>
      <div class="header-logo">Progate</div>
      <ul class="header-list">
        <li>プログラミングとは</li>
        <li>学べるレッスン</li>
        <li>お問い合わせ</li>
      </ul>
      
    </header>
    <main>
      <div class="copy-container">
        <h1>HELLOWORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
      </div>
      <div class="contents">
        
        <h3>学べるレッスン</h3>
        
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        </div>
        
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
         <p>PHP</p>
        </div>
        
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
         <p>Ruby</p>
        </div>
        
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
         <p>Swift</p>
        </div>
        
      </div>
      
      <div class="contact-from">
        
        <h3>お問い合わせ</h3>
        
        <P>メールアドレス（必須）</P>
        <input>
        <p>お問い合わせ（必須）</p>
        <textarea></textarea>
        <p>※必須項目は必ずご入力ください</p>
        <input class="contact-submit" type="submit" value="送信">
        
      </div>
      
      </main>
      <footer>
        <div class="footer-logo">Progate</div>
        <ul class="footer-list">
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </footer>
  </body>
</html>

試したこと

試したことはProgateのコードの模写
コードの書き直し
.footer-list li{　
float:none; //ここでliを立てに直して次のlistから左に寄せました
}
.footer-list{
float:right;
padding-bottom:20px; //ここでliの文字の間隔を調整したかったのですが反映されませんでした。
Progateの見本ではfooter-listの中のfloat:right;のみで縦の箇条書きにできるようなのですがこちらも試しましたがうまくいきませんでした。
画像の文字色は見やすくするために変えました。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
同じような質問が多くありますがどうかご教授のほどお願いします。

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

回答1件

ベストアンサー

こんにちは。

文字の間隔を調整したい

こういうことですか？

css
1.footer-list li{
2  padding: 0;
3}

投稿2020/08/01 02:01

Lhankor_Mhy

総合スコア36115

Boom

2020/08/03 10:02

ご回答ありがとうございます。 Progate上の仕様だと文字同士の間隔が20pxに設定されているのですが .footer-list li{ float:none; }　と設定して文字が縦に並ぶところまではいいのですが paddingで文字の間隔が反映されず困っていますですが本来、上記に記載してあるのですが、float:none;を使わなくても .footer-list{ float:right; ｝のみでリストが右端に移動しliの中身が横から縦になるらしいのですがうまくいかず困っています。