What have I done wrong I have looked over it like 15 times but my .social-call isnt linking.
<html>
<head>
<meta charset="utf-8">
<title>Defenderzon</title>
<!--stylesheet-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<!--defenderzon-icon-------->
<link rel="shortcut icon" href="images/defenderzon-icon.png"/>
<!--using-FontAwesome-For-Icons---->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<!--navigation---------------------------->
<nav>
<!--social-link-and-phone-number-->
<div class="social-call">
<!--social-links--------->
<div class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
<!--phone-number---->
<div class="phone">
<span>Call 236-8607</span>
</div>
</div>
</nav>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
nav{
width: 100%;
box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
z-index: 100;
}
.social-call{
height: 40px;
border: 1px solid rgba(0,0,0,0.05);
display: flex;
justify-content: center;
text-align: center;
}
.social a{
margin: 0px;
color: rgba(0,0,0,0.05);
font-size: 14rem;