I have a bunch of extra Facebook Icons

I have a bunch of extra Facebook Icons
0

#1

Ok, so here is the code I have for the Personal Portfolio Project. I don’t understand why I end up with 4 extra FB icons that seem to be randomly placed along the left side of the screen.

<head>
  <meta content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  
</head>
  <style>
  </style>

<body> 


  
  
  
  <div id="section1" class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h1 id="header-title">Kyle Hazard's Portfolio</h1>
        </div>
    <div class="container-fluid">
      <div class="row">
       <div id="social" class="col-lg-12 ">
        <a href="https://twitter.com/MrKyleHazard" class="fa fa-twitter"> 
            <a href="https://www.instagram.com/mr_kylehazard/?hl=en" class="fa fa-instagram">
              <a href="#" class="fa fa-facebook"
          </div>
        </div> 
       </div>
     </div>
   </div>
  <div id="section2" class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h>2</h>
      </div>
    </div>
  </div>

  <div id="section3" class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h>3</h>
      </div>
    </div>
  </div>
  
  
  
</body> 

<!-- CSS --> 


body{
  position: relative;
  font: Helvetica; 
}

#section1{
  height:500px;
  width:100%;
  background-repeat:no-repeat; 
  background-size:100% 100%;
}
#section2{
  height:500px;
  width:100%;
  background-repeat:no-repeat; 
  background-size:100% 100%;
}
#section3{
  height:500px;
  width:100%;
  background-repeat:no-repeat; 
  background-size:100% 100%;
}

.fa-twitter{
  color:black;
}
.fa-instagram{
  color:black;
}
.fa-facebook{
  color:black;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

#header-title{
  font-weight:bold; 
  position:relative;
  padding:5% 5% 5% 5%; 
  text-align:left; 
  width:100%;
  color:;
}

#social{
  width:100%;
  position:relative; 
  text-align:center;
  font-size:24px;
  padding:10% 10% 10% 10%; 
}

<!---jQuery--->

$("#section1").css("background-image","url(https://images.pexels.com/photos/395198/pexels-photo-395198.jpeg?w=940&h=650&auto=compress&cs=tinysrgb)");


#2

a tags need to be closed so they should end up inline and without extra icons.

<a href="https://twitter.com/MrKyleHazard" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/mr_kylehazard/?hl=en" class="fa fa-instagram"></a>
<a href="#" class="fa fa-facebook"></a>