Facebookのヘッダー部分が同じように模写出来ません。

前提・実現したいこと

HTMLとCSSを使ってFacebookのログインページの模写をしたいです。

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

１枚目が模写したい部分です。２枚目が自分で作ったものですが、パスワードの下のinput要素の下に「アカウントを忘れた場合」を同じように作りたいのですが、上手くいきません????

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Facebook - ログインまたは登録</title>
  <link rel="stylesheet" href="https://unpkg.com/ress@2.0.4/dist/ress.min.css">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <link rel="icon" href="img/favicon (2).ico">
</head>
<body>
  <div class="header-flex">
    <h1>Facebook</h1>
    <nav>
      <ul>
        <li>メールアドレスまたは電話番号</li>
        <li>パスワード</li>
      </ul>
      <input type="text">
      <input type="text">
      <a href="#" class="btn">ログイン</a>
    </nav>
   ** <!-- <a href="#" class="passreset">アカウントを忘れた場合</a> -->**
  </div>

  <main>

  </main>

  <footer>

  </footer>
</body>
</html>

@charset "utf-8";

* {
  text-decoration: none;
}

ul {
  list-style: none;
}

div {
  padding: 10px 30px;
}

.header-flex {
  display: flex;
  background: #3C5A98;
  width: 100%;
  height: 82px;
  align-items: center;
}

.header-flex h1 {
  color: #fff;
  cursor: pointer;
}

.header-flex nav {
  margin-left: auto;
}

.header-flex ul {
  display: flex;
}

.header-flex li {
  color: #fff;
  font-size: 0.875rem;
  margin-right: 1.275rem;
  line-height: 1.5rem;
}

nav input {
  background: #fff;
  border: 1px solid black;
  margin-right: 25px;
}

.btn {
  background: hsl(220, 40%, 53%);
  color: #fff;
  border: 1px solid #3C5A98;
  padding: 5px;
}

.btn:hover {
  opacity: 0.7;
}

/* .passreset {

} */