文字を揃えたい html css facebookログイン画面　模写

前提・実現したいこと

facebookのログイン画面の模写を行なっていますが、文字が揃いません。
footerのBulletinまで１行目に収めたいのですが、instagramまでになってしまいます。
font-size,font-family,幅は同じにしているつもりです。
間違っている箇所、解決法を教えていただけたら幸いです。

facenookのログイン画面

イメージ説明

構築環境：VScode

自分のソースコード

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>
                <h2 class="ex">Facebookを使うと、友達や同僚、同級<br>生、仲間たちとつながりを深められま<br>す。ケータイ、スマートフォンからもア<br>クセスできます。</h2>
            </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>
                        <div class="btn_new">
                            <a role="button" class="form_content_new btn_click font_white btn_details_new">新しいアカウントを作成</a>
                        </div>
                    </div>
                </form>
                <div class="ex_2">有名人、ブランドまたはビジネスのために<nobr class="new">Facebookページを<br>作成できます。</nobr></div>
            </div>
        </div>
        
        <div class="footer">
            <div class="footer-contents">
                <ul class="language">
                    <li>日本語</li>
                    <li>English (US)</li>
                    <li>Português (Brasil)</li>
                    <li>中文(简体)</li>
                    <li>Tiếng Việt</li>
                    <li>Español</li>
                    <li>Bahasa Indonesia</li>
                    <li>한국어</li>
                    <li>Français (France)</li>
                    <li>Deutsch</li>
                    <li>Italiano</li>
                    <a role="button"></a>
                </ul>
                <div class="dot2"></div>
                <ul class="nav">
                    <li><a href="">アカウント登録</a></li>
                    <li><a href="">ログイン</a></li>
                    <li><a href="">Messenger</a></li>
                    <li><a href="">Facebook Lite</a></li>
                    <li><a href="">Watch</a></li>
                    <li><a href="">スポット</a></li>
                    <li><a href="">ゲーム</a></li>
                    <li><a href="">Marketplace</a></li>
                    <li><a href="">Facebook Pay</a></li>
                    <li><a href="">Oculus</a></li>
                    <li><a href="">Portal</a></li>
                    <li><a href="">Instagram</a></li>
                    <li ><a href="">Bulletin</a></li>
                    <li><a href="">ローカル</a></li>
                    <li><a href="">募金キャンペーン</a></li>
                    <li><a href="">サービス</a></li>
                    <li><a href="">投票情報センター</a></li>
                    <li><a href="">グループ</a></li>
                    <li><a href="">Facebookについて</a></li>
                    <li><a href="">広告を作成</a></li>
                    <li><a href="">ページを作成</a></li>
                    <li><a href="">開発者</a></li>
                    <li><a href="">採用情報</a></li>
                    <li><a href="">プライバシー</a></li>
                    <li><a href="">Cookie</a></li>
                    <li><a href="">AdChoices</a></li>
                    <li><a href="">規約</a></li>
                    <li><a href="">ヘルプ</a></li>
                </ul>
            </div>
        </div>  
    </main>
</body>
</html>

fb.css

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

a{
    text-decoration: none;

}

button {
    font-size: 20px;
}


.font_white {
    color:white;
}

html {
    background-color:#f0f2f5;
    width: 100%;
}

body {
    width: 100%;
    /* width: 1189px; */
    height: 536px;
    padding-top: 72px;
    padding-bottom:112px;
    /* background-color: #1877f2; */
}

.contents {
    width: 980px;
    height: 496px;
    margin: 0px 220px;
    padding: 20px 0px;
    display: flex;
}


.left {
    width: 548px;
    height: 330.078px;
    float : left;
    padding-right: 32px;
    font-size:28px;
    
}

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

.right {
    /* text-align:center; */
    float : right;
    height: 456px;
    width: 396px;
}

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:315px;
    padding: 10px 0 24px 0;
    margin-top: 40px;
}

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

.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: 20px;
    -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 {
    width: 187px;
    height: 48px;
    padding: 0 16px;
    margin-left:15px;
    font-size:17px;
    font-weight: bold;
}

.form_line {
    text-align: center;
    width: 396px;
    height: 132px;
}

.ex {
    font-weight: normal;
    font-size:28px;
    line-height: 32px;
    width: 500px;
    height: 128px;
    padding-bottom:20px;
}

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

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

.ex_2 {
    font-size:14px;
    width: 396px;
    height: 37.5px;
    margin-top: 28px;
    color: #1c1e21;
    text-align: center;
}

.forget_pass {
    font-size: 14px;
    font-weight: 500;
    color: #1877f2;
    text-decoration: none;
}

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

.btn_new {
    width: 396px;
    height: 48px;
    padding-top: 6px;
}

.dot2 {
    border-bottom: 1px solid #dddfe2;
    font-size: 1px;
    height: 8px;
    margin-bottom: 8px;
}

.footer {
    font-size:12px;
    color: #8a8d91;
    background-color: white;
    /* height:400px; */
    width: 100%;
    padding-top: 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
}

.footer-contents {
    width:980px;
    height: 137px;
    margin: 0 220px;
}

.language{
    width: 980px;
    height: 20px;
    padding-top: 8px;
}

.nav {
    width: 1000px;
    margin-left: -20px;
    height: 57px;
    text-decoration: none;
}


.language li{
    display: inline;
    overflow:hidden;
    width: 40px;
    height: 16px;
    padding-left:10px;
    
}

.nav li {
    display: inline;
    overflow:hidden;
    width: 40px;
    height: 16px;
    padding-left:20px;  
}

回答1件

ベストアンサー

<br>は改行をするタグです。

html
1<li><a href="">Instagram</a></li><br>

投稿2022/01/19 03:10

Lhankor_Mhy

総合スコア33700

回答へのコメント

mgrates

2022/01/19 03:40

見落としておりました、、ご指摘ありがとうございました。 <br>を消してみましたが、変化がありませんでした。何か他に原因はありますでしょうか？

Lhankor_Mhy

2022/01/19 04:02

当方の環境では、brを消すことによって Bulletin が1行目に入りました。ですので、ご提示いただいているコードには問題の原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題をうまく共有できていないのだと思います。問題を再現する手順をもう少し詳しくご提示いただけますか？

mgrates

2022/01/19 04:10

コメントいただきありがとうございます。現在の画面の状態画像を追加しました。VScodeで環境構築しておりますが、何か他に必要な情報等、試すべきこと等ありましたら教えていただけたら幸いです。

Lhankor_Mhy

2022/01/19 04:15

スクリーンショットからわかることは少なさそうです。推測ですが、mgrates さんの環境はマックではありませんか？そうであれば、表示されるフォントが異なるでしょうから、インラインレイアウトの折り返しがずれるのは致し方ないことかと思います。

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.83%

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

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

質問する

ボタンのcssが一部にしか効かない

回答2

クリップ0

更新

2023/05/06

Q&A

解決済

Jquery のイベントの開始について

回答1

クリップ0

更新

2023/05/30

Q&A

解決済

CSSで、hover時にボタンの背景をスライド式に変えたい

回答2

クリップ0

更新

2023/05/25

Q&A

解決済

画像背景の上にボタン画像を指定の位置に設置したい

回答1

クリップ0

更新

2023/05/30

Q&A

解決済

CSS position: absolute　が効きません

回答1

クリップ0

更新

2023/05/23

Q&A

解決済

Google Chromeのデベロッパーツールでコード入力してウェブサイト上に反映を確認後にCSSを編集するも反映されない

回答2

クリップ0

更新

2023/05/30

Q&A

受付中

【PC】横スクロール可能なボックスを複数並べ、その全てのボックス内においてマウスホイールでの横スクロール操作をしたい

回答2

クリップ0

更新

2023/06/01

Q&A

解決済

GoogleMapsAPIで最初に表示されるズームレベルをパラメータで指定する方法

回答1

クリップ1

更新

2023/05/31

同じタグがついた質問を見る

トップ JavaScriptに関する質問

文字を揃えたい html css facebookログイン画面　模写

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

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