【初心者】CSSのwidthが反応しません

Question

前提・実現したいこと

menu-cardの枠の中に、menu-imageを100％で表示させたいです。

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

以下のコードがうまく反応しません。記載のソースコード一番下です。

.menu-image{
  width: 100%;
}

該当のソースコード

【HTML】
      <div class="menu">
        <div class="container">
          <h2>メニュー</h2>
          <div class="card-wrapper">
            <div class="menu-card">
              <div class="menu-card-inner">
                <img calss="menu-image" src="marine_coffee/images/blend-coffee.jpg" alt="ブレンドコーヒー">
                <h3>ブレンドコーヒー</h3>
                <p>一番人気の商品です。<br>味だけではなく、香りもお楽しみください</p>
              </div>
            </div>
           

【CSS】
@charset "utf-8";

.menu{
  padding: 90px 0 60px;
  color: #5a5c5f
}

.menu-card{
  width: 33%;
  margin-top: 35px;
}

.menu-card-inner{
  padding: 25px 30px;
  background-color: #dbe0e4;
  border-radius: 7px;
  box-shadow: 1px 1px 4px #d2d4d6;
  text-align: center;
}

.menu-image{
  width: 100%;
}

試したこと

width以外でも試しましたが、反応しません。
一つ前の
.menu-card-inner{
は反映されているようです。

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

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

Answer 1

％は親要素を基準に幅を判断するため、
imgタグが入っている親タグのdivに幅を指定しないとその基準がないので

「え？基準ないけどどこの１００％？わかんないよー」となります。

Comments

[yujill]

回答ありがとうございます。
親要素の.menu-card-innerにwidthの指定を入れてみたのですが、何も反応しませんでした・・・。
よくよく見てみたら、.menu-imageのwidthの下にborder-radiusを入れてみても反応しないので、そもそもこの.menu-imageに描かれるCSSが全て反応していない気がします。
お手数をおかけして申し訳ございませんが、再度ご教示いただけないでしょうか。

[yujill]

htmlにwidthを組み込んで代替できました！
原因はわかりませんでしたが、とりあえず解決はできましたので、ありがとうございました。