CSS paddingが効かない

前提・実現したいこと

現在、facebookのログイン画面の模写を行なっています。
facebookロゴにpaddingを挿入しようとしたところ、paddingが効きませんでした。
paddingがなぜ効かないかと、どうコードを修正すれば良いか教えていただきたいです！

試したこと

実証コードを確認すると、左のfacebookロゴのCSSは

._8icx._8opv ._8ice {
    padding: 112px 0 16px;
}

となっているので、

自分のコードのleft_logo箇所にpaddingを挿入してみましたが、うまくいきませんでした

.left_logo {
    padding: 112px 0 16px 0 ;
}

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

自分のコード

fb.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook - ログインまたは登録</title>
    <link rel="stylesheet" href="fb.css">
</head>
<body>
    <!-- メインコンテンツ -->
    <main>
        <div class="contents">
            <div class="left">
                <div class="left-logo">
                    <img class="logo" src="img/logo.svg" alt="">
                </div>
                <div class="ex">
                    <div>Facebookを使うと、友達や同僚、同級<br>生、仲間たちとつながりを深められま<br>す。ケータイ、スマートフォンからもア<br>クセスできます。</div>
                </div>
            </div>

            <div class="right">
                <form class="form" action="#">
                    <div class="form_line">
                        <div>
                            <input type="text" class="form_content" name="email" id="email" data-testid="royal_email" placeholder="メールアドレスまたは電話番号:" autofocus="1" aria-label="メールアドレスまたは電話番号:" style="">
                        </div>
                        <div>
                            <input type="password" class="form_content" name="pass" id="pass" data-testid="royal_pass" placeholder="パスワード" aria-label="パスワード">
                        </div>
                    </div>
                    <div class="login_btn">
                        <button value="1" class="form_content_btn btn_click font_white btn_details" name="login" type="submit">ログイン</button>
                    </div>
                    <div class="center">
                        <a href="https://www.facebook.com/recover/initiate/?privacy_mutation_token=eyJ0eXBlIjowLCJjcmVhdGlvbl90aW1lIjoxNjQyMzAxMDg2LCJjYWxsc2l0ZV9pZCI6MzgxMjI5MDc5NTc1OTQ2fQ%3D%3D&amp;ars=facebook_login" class="forget_pass">パスワードを忘れた場合</a>
                        <div class="dot"></div>
                        <a role="button" class="form_content_new btn_click font_white btn_details_new">新しいアカウントを作成</a>
                    </div>
                </form>
                <div class="ex_2">有名人、ブランドまたはビジネスのために<nobr class="new">Facebookページを<br>作成できます。</nobr></div>
            </div>
        </div>
    </main>
 
    <!-- フッター -->
    <footer>
        フッターの中身
    </footer>
    
</body>
</html>

fb.css

* {
    margin: 0px;
    padding: 0px;
}


.font_white {
    color:white;
}

html {
    background-color:#f7f7f7;
}

body {
    width: 1189px;
    height: 536px;
    padding-top: 72px;
    padding-bottom:112px;
}

.contents {
    width: 980px;
    height: 496px;
    margin: 0px 104.5px;
    padding: 20px 0px;
}

.left {
    width: 548px;
    height: 330.078px;
    float : left;
    
}

.left_logo {
    padding: 112px 0 16px 0 ;
}

.right {
    /* text-align:center; */
    width: 50%;
    float : right;
}

img.logo {
    height:106px;
    width:301px;
    margin: -28px;
}

.form {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
    width: 396px;
    height:349px;
}

.form_content{
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    height:20px;
    width:330px;
    padding:14px 16px;
    margin:5px 0px;
    font-size:20px;
}

.login_btn {
    padding:0 16px;
}

.form_content_btn {
    background-color: #1877f2;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    line-height: 48px;
    padding: 0 50px;
    width: 332px;
    font-size:20px;
}

.form_content_new {
    background-color: #42b72a;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    line-height: 48px;
    padding: 0 18px;
    width: 187px;
}

.btn_click {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
}

.btn_details{
    border: 1px solid;
    border-radius: 2px;
    box-sizing: content-box;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    justify-content: center;
    padding: 0 16px;
    position: relative;
    text-align: center;
    text-shadow: none;
    vertical-align: middle;
    border-radius: 6px;
}

.btn_details_new {
    margin-left:15px;
    font-size:17px;
}

.form_line {
    padding:16px;
}

.ex {
    margin-left:30px;
    font-size:24px;
}

.new {
    font-size: 14px;
    font-weight: 600;
    vertical-align : middle;
}

.center {
    text-align:center;
    margin-top: 16px;
}

.ex_2 {
    font-size:14px;
}

.forget_pass {
    font-size: 14px;
    text-decoration: none;
}

.dot {
    align-items: center;
    border-bottom: 1px solid #dadde1;
    display: flex;
    margin: 20px 16px;
    text-align: center;
}

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

回答2件

記述ミスです

HTML
1<div class="left-logo">

↓に修正

HTML
1<div class="left_logo">

もしくは

CSS
1.left_logo {
2    padding: 112px 0 16px 0 ;
3}

↓に修正

CSS
1.left-logo {
2    padding: 112px 0 16px 0 ;
3}

どちらかを修正してください。

投稿2022/01/17 11:44

jinba

総合スコア310

mgrates

2022/01/17 11:49

ご丁寧にありがとうございます！解決いたしました。

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

ベストアンサー

html
1<div class="left-logo">

css
1.left_logo {

- と_は別物です。

投稿2022/01/17 11:37

hatena19

総合スコア33715

mgrates

2022/01/17 11:49

ケアレスミスでした、、。ご指摘ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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