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)");