勝手に要素がズレてしまう

Question

【HTML CSS】<li>が要素が変な位置にズレてしまう。
閲覧ありがとうございます。プログラミング初心者です。模写コーディングを行っているのですが、どうしてもうまくいかない箇所があります。

https://www.kneipp.jp/lp/yuzu/index.html
このサイトを模写コーディングしているのですが、サイト中央部のユズとジンジャーの箇所が上手くいきません。

<img>の下に<ul>タグを入れ、画像の下に文字を入れようとすると添付した画像のようになぜか右へ大きくズレてしまいます。

どこが間違っているのかずっと考えても、解決しないのでどうかご教授お願い致します。

<main>
<div class="main-img">
<img class="tennen" src="www.kneipp.jp/lp/yuzu/shared/img/c02_title.png" alt="画像">
<img src="www.kneipp.jp/lp/yuzu/shared/img/c02_img1.png" alt="画像">
<a href="#"><img src="www.kneipp.jp/lp/yuzu/shared/img/c02_bnr.png" alt="画像"></a>
</div>
<div class="main-sub">
<img class="yuzu" src="/www.kneipp.jp/lp/yuzu/shared/img/c02_yuzu.png" alt="画像">
<ul>
<li>血行促進</li>
<li>冷え性予防</li>
<li>むくみ予防</li>
</ul>
<img src="www.kneipp.jp/lp/yuzu/shared/img/c02_ginger.png" alt="画像">
<ul>
<li>血行促進</li>
<li>発汗作用</li>
<li>鎮痛作用</li>
</ul>
</div>
</main>

main {
background-color: rgb(248, 222, 184);
padding: 0px 300px;
text-align: center;
}

.tennen {
margin-bottom: 30px;
}

main a {
transition: all 0.3s;
}

main a:hover {
opacity: 0.8;
}

.main-sub {
height: 500px;
}


.main-sub img {
padding-top: 10px;
float: left;
}

.main-sub li {
list-style: none;
}

.yuzu {
margin-right: 100px;
}

Comments

[K_3578]

ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。
質問は編集できますので。下記は例です。
```HTML
htmlのソースコード
```
(1行空ける)
```CSS
cssのソースコード
```

[nakadora0516]

ご指摘ありがとうございます。訂正させて頂きました。

[K_3578]

模写コーディングは私したことないので分かりませんが、いつまでも進まないぐらいなら
該当サイトを検証ツールとかで覗いてみては？勿論全部見て丸々コピペしても何の技術向上にもなりませんが、分からない箇所を見てみて、どういう技術なのか明確に公式ドキュメントで調べたりすれば知識の定着には繋がると思います。

Answer 1

imgタグにfloat:leftを指定しているからではないかと。

.main-sub img {
padding-top: 10px;
/*float: left; 不要*/
}

mainタグはあくまでtext-alignで中央に寄せているだけなので、要素そのものを左右に動かすfloatの方が強く働きます。通常はmarginタグを使って制御していくものですけどね。