cssが反映されない | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

htmlとcssを学習している者です。
cssがブラウザ上に反映されていませんでした。

html


<div class="menu">
<div class="container">
<h2>メニュー</h2>
<div class="menu-card-wrapper">
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/blend-coffee.jpg" alt="ブレンドコーヒー">
<h3 class="menu-title">ブレンドコーヒー</h3>
<p class="menu-text">
　一番人気の商品です
<br>
味だけでなく、香りもお楽しみください
</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/hot-tea.jpg" alt="ホットティー">
<h3 class="menu-title">ホットティー</h3>
<p class="menu-text">
ディンブラ茶葉を使用
<br>
渋みのない紅茶の良き風味となっています。
</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/hibiscus-tea.jpg" alt="ハイビスカスティー">
<h3 class="menu-title">ハイビスカスティー</h3>
<p class="menu-text">すっきりした味わいが人気の商品です
<br>
エジプト産のハイビスカスを使用
</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/lemonade.jpg" alt="レモネード">
<h3 class="menu-title">レモネード</h3>
<p class="menu-text">広島・瀬戸田産のレモンを使用
<br>
まろやかな酸味が特徴となっています</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/caffelatte.jpg" alt="カフェラテ">
<h3 class="menu-title">カフェラテ</h3>
<p class="menu-text">
香り豊かな本格エスプレッソにコクのあるミルクをたっぷり加えました
</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-innner">
<img class="menu-image" src="images/orange-juice.jpg" alt="オレンジジュース">
<h3 class="menu-title">オレンジジュース</h3>
<p class="menu-text">果実そのままの味わいにこだわった果汁100％ジュースです
<br>
ほどよい酸味をお楽しみください
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="footer-left">
<p>このサイトをシェアする。</p>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Marine Coffee" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="footer-right">
&copy; 2018 Marine Coffee.
</div>
<div class="clear"></div>
</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;
}
.manu-image {
width: 100%;
}


このように打ち込んだんですがcssが反映されていませんでした。原因を教えてください。

 ホームページへ戻る

フリーランスを目指す方は姉妹サイト、レッツ！フリーランスWebデザイナー.netもご覧ください