以下の図と同じように作る

アセット 3.jpg

手順

sample.zipをダウンロードして解凍する。
sectionタグを書き、その中に見出しを書く。
見出しの下に、divタグを書く。また、クラスyokoを付加する。
divタグの中に、imgタグとdivタグを書く。
内側のdivタグの中に、h2タグとpタグを書く。
sectionタグを、1000pxでセンタリングする。
クラスyokoの中を横並びにする。
クラスyokoの中のdivタグの横幅を550pxにする。
クラスyokoの横の並び方を左右等間隔にする。

回答例

https://www.youtube.com/embed/tcgWyAWY8Ds?si=TADoSfvGS-Sdq1RP

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section>
        <h1>見出し1見出し1見出し1見出し1見出し1見出し1見出し1見出し1見出し1</h1>
        <div class="yoko">
            <img src="img/sample.jpg" alt="">
            <div>
                <h2>見出し２見出し２見出し２見出し２見出し２見出し２</h2>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
    </section>
</body>

</html>

section {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.yoko {
    display: flex;
    justify-content: space-between;
}

.yoko div {
    width: 550px;
}

.yoko div h2 {
    margin: 0;
}