リンク範囲がずれている

Question

いつもお世話になっております。

楽天goldでページを作成したのですが、一番下の商品CHECKボタン(ジョジョとブライアンモデルのところ)
のリンク範囲がズレている？ようで、カーソルを置く位置によってリンクが反応します。
指定しているaタグなど変更してみましたがズレが直る気配がなく…。
左右にリンクがズレているのでfloatタグが原因だったりするのでしょうか。
ご教示の程、よろしくお願いいたします。

ページURL↓
https://www.rakuten.ne.jp/gold/tokeiten/feature/5sports/index.html

Accepted Answer

ECマスターズの伊藤です。


> 一番下の商品CHECKボタン(ジョジョとブライアンモデルのところ)

こちらに

Comming Soon...

の要素がかぶってしまっているため、
重なっている部分のみ、リンクが反応していないように
見えています。

.a_contents h1{
    border:1px solid red;
}
を追加いただくと、状態がわかりやすいと思います。

float:leftは、要素の高さを取得できないため
次に来る親要素に
clear:both
を追加していただきますよう、お願いいたします。

float:leftを多用されるようでしたら
今後のためにも、下記の記事を
ご一読いただくとよろしいかと思います。
https://qiita.com/shizuma/items/e79702c915a557491884


なお、今回の場合は

.a_contents

に

clear:both;

を追加いただくことで、ご対応いただけます。

Answer

ご回答ありがとうございます！
重なりが無事直りました。