CSSが反映されない

a {
text-decoration: none;
}
を指定しても反映されず下の傍線がついたままになります。

何か優先されているのでしょうか？
初心者で教科書をみながらやっているのですが解決策がわからず質問しました。
宜しくお願いします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <title>asobube</title>
       
        <link rel="stylesheet"  href="stylesheet.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body>
        <header>
            <div class="page-header">
                <h1><a href="bare.html"><img class="logo" src="images/image.jpg" alt="ダンスしてる人"></a></h1>
                <nav>

                    <ul class="main-nav">
                        <li><a href="bare.html">ホーム</a></li>
                        <li><a href="#">講師プロフィール</a></li>
                        <li><a href="#">アクセス</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>
</html>

@charset "UTF-8";

body {
  font-family:"Yu Gothic Medium", "遊ｺﾞｼｯｸ Medium" , "YuGothic" , "遊ｺﾞｼｯｸ体" , "ﾋﾗｷﾞﾉ角ゴ　Pro　M3",sans-serif;
  line-height:1.7;
  background-color:white;
}

html {
  font-size:100%;
}

a {
  text-decoration: none;
}
img {
  max-width:100%;
}