Struggling to position three social media buttons on my page, but they keep appearing at the top of the page. I want them in a straight line centered within the header. No matter what I try, the icons remain stuck at the top.
<!DOCTYPE html>
<HEAD>
<TITLE> FEEL THE GAME </TITLE>
<LINK href="to.css" rel="stylesheet" type="text/css">
</HEAD>
<body>
<div id="header">
<div class="icons">
<a class="fb-link" href="#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">HOME</a>
</li>
</li>
<li> <a href="#">dropdown #1</a>
<ul>
<li><a href="#">dropdown #1 item #1</a>
</li>
<li><a href="#">dropdown #1 item #2</a>
</li>
<li><a href="#">dropdown #1 item #3</a>
</li>
</ul>
</li>
<li> <a href="#">dropdown #2</a>
<ul>
<li><a href="#">dropdown #2 item #1</a>
</li>
<li><a href="#">dropdown #2 item #2</a>
</li>
<li><a href="#">dropdown #2 item #3</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
</div>
</div>
<div id="wrapper">
<div id="content_area">
<p></p>
</div>
</div>
<DIV ID="footer"></DIV>
<center>
<video width="900" height="550" controls >
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object>
</video>
</center>
</BODY>
</HTML>
CSS
body {
margin:0;
padding:0;
min-width:525px;
font-family: Arial;
font-size: 17px;
background-image:url('fifa2.jpg');
}
#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
background-image:url('purty_wood.png');
}
#footer {
float: left;
width: 100%;
background-image:url('classy_fabric.png');
font-size: 14pt;
font-weight: bold;
text-align: center;
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}
#wrapper {
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#nav {
background-image:url('classy_fabric.png');
margin-top: 68px;
}
#nav_wrapper {
width: 335px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
img{
position:absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
.fb-link, .twr-link, .inst-link {
display:block;
width:64px;
margin-left:20px;
}
.fb-link{
margin-left:0;
}
![My page icons stuck top of the page][1]