inputタグの下にｐタグを入れたい

前提・実現したいこと

HTML　CSSを勉強し始めて1ヶ月ほどの初学者です。
現在Facebookのログインページを模写しており、ヘッダーを作成中です。
inputタグを用いてメアド、パスワードの入力欄を作成しましたがその下に”アカウントを忘れた場合”というpタグを入れたいです。

初歩的なミス、知識不足の可能性もあるかと思いますがご教授お願い致します。

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

解決方法が分からず、調べてもわからないので質問しました。

現状としてpタグにpadding指定してpタグの場所を動かしていますが、inputタグの下にｐタグを入れ込むことができず、padding値を変えてもinputタグとｐタグが一緒になって指定した値の分だけ動いてしまいます。

HTML
1
2### 該当のソースコード```
3<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="utf-8">
7  <title>facebook ログインページ</title>
8  <link rel="stylesheet" href="facebok.css">
9  </head>
10  <body>
11      <header>
12          
13          <div class="header-logo">facebook </div>
14              
15              <nav>
16                 <ul>
17                    <li><a>メールアドレスまたは電話番号</a><input>
18                    </li>
19                    <li><a>パスワード</a><input> 
20                    </li>
21                 </ul>
22                    <button class="button2" type="submit"> ログイン</button>
23                <p><a href="#">アカウントを忘れた場合</a>
24                </p>
25                    
26                
27              </nav>
28              </div> 
29          </header>
30

css
1header {
2    height: 80px; 
3    width: 100%;
4    background-color: #385898;
5    display: flex;
6    align-items: center;
7}
8.header-logo {
9    font-size: 14px;
10    font-style: italic;
11    font-weight: 600px;
12    line-height: 19px;
13    padding: 0px 180px;
14    color: white;
15}
16nav {
17    margin-left: auto;
18    display: flex;
19    
20}
21nav ul {
22    list-style: none;
23     display: flex;
24    text-align: center;
25}
26nav ul li a {
27    color: white;
28    font-size: 12px;
29    font-weight: 400;
30    font-style: normal;
31    line-height: 16px;
32    display: block;
33
34}
35button.button2 {
36
37    margin: 35px 0 25px 0;
38    font-size: 12px;
39    height: 20px;
40    text-align: center;
41}
42header p {
43padding-top: 60px;
44padding-right: 240px;
45font-size: 12px;
46}
47

試したこと

paddingを用いて値を設定

インターネットを用いての調査

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

vs　codeを使用しています。

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

回答1件

ベストアンサー

input（の入っているul）とbuttonが一列で並び、その下の行にpが入るという認識で書きます。

ulとbuttonを何かしらのタグで括る（例ではdiv.logwrapにしておきます）

html
1<nav>
2  <div class="logwrap"><!-- new -->
3    <ul>...</ul>
4    <button ...>ログイン</button>
5  </div>
6
7  <p><a href="#">アカウントを忘れた場合</a></p>
8</nav>

div.logwrapにdisplay: flex;とwidth: 100%;を付ける

css
1.logwrap {
2  display: flex;//new
3  width: 100%;//new
4}

navにflex-wrap: wrap;を付ける（これを付けるとflex-box内ではみ出しそうな要素が下の行に回り込んでくれるようになります）

css
1nav {  
2  margin-left: auto;
3  display: flex;
4  flex-wrap: wrap;//new
5}

pとulのpaddingを0にする

css
1 
2nav ul {  
3  list-style: none;  
4  display: flex;  
5  text-align: center;
6  padding: 0;//new
7}
8
9header p {  
10  //padding-top: 60px;  
11  //padding-right: 240px;  
12  font-size: 12px;  
13}