cssが反映されない

Question

プログラミング初心者です。初歩的なことで申し訳ありませんが、
ご回答をいただきたいことが２つあります。

1.下記のmore product部だけcssが反映されません。
模写サイトのように、moreのボタンを作成したいのですが、出来ません。

2.product部のコンテンツを、３つずつ横並びにしたいのですが、
cssを設定しても、画像は小さくならず、pタグの中のメッセージだけどんどん小さくなります。
どうすれば、模写サイトのようになるのでしょうか。

【模写サイト】：https://pas-pol.jp/

<div class="product-wrapper">
    <div class="product-container">
    <div class="product-title">PRODUCT</div>
    <a class="more product" href="https://www.google.com/?hl=ja">MORE</a>

    <div class="products">
          <div class="product">
            <a href="#">
            <img src="image/fes001t.png" >
            <p>The World Festival Guide -海外の音楽フェス完全ガイド-</p>
          </a>
          </div>
          <div class="product"><a href="#">
            <img src="image/banner_サムネイル21.png" >
            <p>この世界で死ぬまでにしたいこと2000</p>
          </a>
          </div>
          <div class="product"><a href="#">
            <img src="image/365日本カレンダー_サムネイル1.png" >
            <p>365日日本一周　絶景日めくりカレンダー
            </p>
          </a>
          </div>
          <div class="product"><a href="">
            <img src="image/passportnotebook-thumb11.png" alt="">
            <p>PASSPORT NOTEBOOK series</p>
          </a>
          </div>
          <div class="product"><a href="">
            <img src="image/englishbook-thumb11.png" >
            <p>ひとり旅英会話BOOK</p>
          </a>
          </div>
          <div class="product">
            <img src="image/a" alt="">
            <p>日本の絶景ポストカード</p>
        </div>
      </div>  
    </div>
</div>

.product-wrapper{
  font-family:Gill Sans Std Book;
  height:800px;
}
.product-container{
  padding:110px;
  width:200px;
}
.product-title{
  padding-left: 20px;
  letter-spacing: 2px;
  font-size:30px;
}
.more product {
  text-decoration:none;
  border: solid 20px black;
  float: right;
  font-size: 90px;
  display:block;
}

.products{
  width:100px;
}

.product img{
  margin:60px;
  cursor:pointer;
  height:20%;
  widows: 20%;
  }

Answer 1

class="more product" の要素にスタイルを適用するには次のようにします。

.more.product {
  /* スタイルを記述 */
}

また、.product img で記述している windows: 20%; は width: 20%; の間違いかと思います。

Comments

[kmome]

すごく単純なミスをしていたということに気が付きました。
ありがとうございました。