widthが効かない

Question

前提・実現したいこと

aタグの部分をwidth30%にしたいです。
今は大きな画像は重なって表示されてしまいます。

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

```HTML
  <div class="product-wrapper">
    <div class="container">
      <div class="heading">
        <h2>PRODUCT</h2>
        <span class="btn message">MORE</span>
      </div>
      <div class="products">

        <div class="product">
          <div class="product-icon">
            <a href="#"><img src="paspol_images/fes001t.png">
              <p>The World Festival Guide - 海外の音楽フェス完全ガイド -</p></a>
          </div>
        </div>

        <div class="product">
          <div class="product-icon">
            <a href="#"><img src="paspol_images/banner_21.png">
              <p>この世界で死ぬまでにしたいこと2000</p></a>
          </div>
        </div>

```CSS

.product{
display: block;
float: left;
width:30%;
}

.product-icon {
position: relative;
}
コード

コード

該当のソースコード

ソースコード

試したこと

inline-blockしても適用されませんでした。。。

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

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

Answer 1

.product の幅を30% に設定してますが、画像サイズを.productの幅と同じにしたいということなら、下記でどうですか。

.product a img {
  width:100%; 
}

Comments

[_arukuneko]

すごい。。。できました。
ただ
.product{
display: block;
float: left;
width:30%;
}

も一緒に記載してないと適用されないのが謎です・・・

[hatena19]

当然必要です。
まず、親要素である .product を30%にします。
子要素が div だと親要素と同じ幅になりますが、img（画像）は自身のサイズをもってますので幅を設定しないと自身のサイズのままです。
そのために、親要素と同じ幅になるように、width:100%; を設定する必要があります。

[_arukuneko]

もっと理解してコード書けるように頑張ります・・・。無事解決して嬉しいです。ありがとうございました。