ボタンのhoverが適用されない

ボタンのhoverが適用されないですどこか違えていませんか
HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>風景写真家「SNAPPRS」 official website</title> <link href="<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">" <link href="css/style.css" rel="stylesheet"> </head>  <body id="index">  <header> <div class="logo"> <a href="index.html"> <img src="images/logo.png" alt="ANAPPERS"> </a> </div> <nav class="global-nav"> <ul> <li><a href="portfolio.html">portfolio</a></li> <li><a href="bout.html">bout.html</a></li> <li><a href="contact.Hhhhhtml">contact</a></li> </ul> </nav> </header>  <div id="wrap"> <div class="content"> <h1>Life is beautiful,<br>snap!snap!</h1> <p>このwebサイトは、学習サンプルとして作成する「SNAPPERS」という架空写真家のポートフォリオサイトです。<br>チュートリアル形式でHTMLとCSS学びながら完成を目指します楽しんで作成しましょう</p> <p class="btn"><a href="portfolio.html">My portfolio</a></p> </div> </div>  <footer> <small>(c)2017 Hattori-studio.</small> </footer> </body> </html>

CSS
@charset "UTF-8";

body{
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6{
margin-top: 0;
}
img{
vertical-align: bottom;
}
ul{
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a visited{
color: #788d98
}
a hover{
text-decoration: underline;
}

header{
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo{
float: left;
margin-top: 50px;
}
.global-nav{
float: right;
margin-top: 60px;
}
.global-nav li{
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.global-nav li a {
color: #ffffff
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap{
classear: both;
}
.content{
width: 960px;
margin: 0 auto;
}
footer{
text-align: center;
color: #ffffff;
padding: 20px;
}
footer small{
font-size: 12px;
}
#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
font-family: 'Roboto', sans-serif;
margin-bottom: 50px;
}
#index .content {
margin-top: 150px;
}
#index p{
font-size: 16px;
color: #ffffff
}
.btn a {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
font-family: 'Roboto', sans-serif;
width: 185px;
display: block;
text-align: center;
border-radius: 5px;
border: 3px solid #009cd3;
}
.dtn a:hover {
text-decoration: none;
background-color: #ffffff;
color: #009cd3;
}

m.ts10806

2020/05/24 09:09

これだけ提示されても誰も答えられません。回答者が勝手にCSSにあわせたHTMLを構築したところで質問者さんの現象は再現しません。ご自身のHTML、CSS全てご提示ください。あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/05/24 09:17

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/05/24 18:08

（3回目）コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、解決されたようですが、「どのように解決となったか」誰にも分からないです。 https://teratail.com/help/question-tips#questionTips4-2 回答にコメントでフィードバックしてください。