HTML練習　フォームのグルーピング

前提・実現したいこと

HTML練習をテーマにHTMLを独学しています。今回はフォームのグルーピングについて学んでます。

<fieldset> <legend>を使ってそれぞれの項目を分けてわかりやすいページを作成したいです。

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

問題は、囲みがきちんと囲んでくれないことです。初めはIDとパスワード単体できちんと囲むことできましたが
性別の<fieldset>がアドレスまでも囲むページになりました。2回目は書き直したら、IDとパスワードが全体を囲む形になりました。（性別は、単独で囲むことができました）
エラーメッセージ


### 該当のソースコード

```HTML
ソースコード<! doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  <head>
  <body>
      <fieldset>
      <legend>IDとパスワード</legend>
     <input type="text" name="name"><br>
     <input type="password" name="pass"><br>
     </fieldset>
     <input type="info" rows="4" cols="80"><br>

　　 <fieldset>
     <legend>性別</legend>
     <input type="radio" name="gender" value="male" id="male"><label for="male">男性</label><br>
     <input type="radio" name="gender" value="female" id="female"><label for="female">女性</label><br>
     </fielset>

　　 <br>
     <input type="checkbox" name="music" value="pop">Pop<br>
     <input type="checkbox" name="music" value="Jazz">Jazz<br>
     <input type="checkbox" name="music" value="rock">Rock<br>
     <br>
     <select name="address">
     <optgroup label="関東">
     <option value="tokyo">東京<br>
     <option value="chiba">千葉<br>
     <option value="saitama">埼玉<br>
     </optgroup>
     <br>
     <optgroup label="関西">
     <option value="Osaka"大坂><br>
     <option value="Hyogo"兵庫><br>
     <option value="Kyoto"京都><br>
     
  </body>
<html>

### 試したこと
書き直しましたが、今度はIDとパスワードが全体をかこっています。

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

ここにより詳細な情報を記載してください。