これはゴールポスターです

これは私のポスターです

私のコードを読んで、どこが間違っているのか教えてもらえますか/もっと簡単な方法があるかどうかを教えてください このプロジェクトは、モチベーションを高めるポスター Web サイトを作成することです。

TODO: モチベーションを高める投稿の Web サイトを作成します。 お好みのスタイルに仕上げてください。 インスピレーションを得るためにターゲットの画像を見てください。 ただし、次の特性が必要です:

1. メインの h1 テキストには、Google Fonts の Regular Libre Baskerville フォントを使用する必要があります。 https://fonts.google.com/specimen/Libre Baskerville
2. テキストは白、背景は黒でなければなりません。
3. 独自の画像をアセット内の画像フォルダーに追加します。 5 ピクセルの白い境界線があるはずです。
4. テキストは中央揃えにする必要があります。
5. h1、p、image 要素を含む div を作成します。画像とテキストがページの中央に配置されるように余白を調整します。 ヒント: 幅を 50%、左マージンを 25% に設定して、div を水平方向の中央に配置します。 ヒント: div を埋めるには、画像の幅を 100% に設定します。
6. CSS を使用した大文字の h1 については、MDN ドキュメントの text-transform プロパティを参照してください。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

h1 { 色: 白; フォントファミリー: 'Libre Baskerville'、筆記体; } p { 色: 白 } 体 { 背景: 黒; } #テキスト { テキスト変換: 大文字; } #box1 { 境界線: 5 ピクセルの実線。 テキスト整列: 中央; 色: 白; 幅: 450ピクセル; 高さ: 500ピクセル; パディングトップ: 50px; } ディビジョン { 幅: 50%; 高さ: 100%; マージン左: 25%; マージントップ: 25%; }

 
      <頭>
         <リンク rel="preconnect" href="https://fonts.gstatic.com"crossorigin />
       <リンク href="https://fonts.googleapis.com/css2?family=リブレ バスカヴィル&display=swap" rel="スタイルシート">

       <本体>
        
   
いきましょう!!!
 
僕たちはやりました
 
  

最小化すると画像は中央に配置され (画面の半分を占める)、見栄えがよくなりますが、フルにすると中央に配置されますが、下部に表示されます。

勉強し始めたばかりなので、HTML と CSS の基礎しか知りません*