Search code examples
htmlcsshtml-listshreffooter

li ahref, social media icons doesnt working

I have been facing a big problem. I don't know why I cannot solve this. The problem is I have made a footer for my website and added some li elements and social media icons..but it's not working.please help.

screenshot

Here the li elements "About","Media","feedback","privacy policy" are not working. Also the 4 social media icons aren't working. Here's my html and css code below:-

footer
{
width: 100%;
background-color: #2d2d2d;
padding: 20px 0px;
	height: 150px;
}
footer h2 {
    font-size: 16px;
    color: #a1a1a1;
    text-transform: uppercase;
	margin-top: 10px;
    margin-bottom: 40px;
	margin-left: 20px;
	

	
}
h2 {
    font-size: 20px;
	font-family: 'Gothic-Bold';
    font-weight: normal;
	position:sticky;
	margin-bottom: 40px;
	padding-top: 20px;
}


* {
    padding: 0px;
    margin: 0px;
}

.ft-quick-links
{
	float:left;
	width:400px;
}
.ft-quick-links ul li{
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	margin-left: 5px;
	list-style: none;
	padding-right: 5px;
	padding-top: 20px;
	
	
}
.ft-quick-links li a{
	padding: 8px 15px;
	font-size: 13px;
	color: #959595;
	background:#202020 ;
	text-decoration: none;
	margin-bottom: 30px;
}
.ft-quick-links li a:hover{
	background:#171717;
}
.footer-btm-wrapp{
	width:100%;
	display:table;
	background:#1b1b1b;
}
.ft-btm-left {
	float:left;
}
.ft-btm-left ul li{
	float:left;
	margin-right:40px;
}
.ft-btm-left ul li a{
	font-size:12px;
	color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
	text-decoration:none;
}
.footer-btm-wrapp .wrapper{
	padding:20px 0px;
}
.ft-social ul li{
	float: right;
	padding-right: 20px;
	padding-top: 100px;
	list-style: none;

	 
}
.footer-btm-wrapp .wrapper{
	padding:8px 0px;
	list-style: none;
}


.copy-rights p{
	color:#959595;
	font-size:13px;
	list-style: none;
	margin-top: -40px;
	padding: 60px 20px 10px;
	float:right 10px;
	text-align:right;
	list-style: none;
	
	
	
}
.wrapper{
	width:1100px;
	margin:0px auto;
	position:relative;
}

.ft-lines{
    font-size: 12px;
    margin-top: 110px; 
    
}

.ft-lines li {
    list-style: none; 
    display: inline; 
    margin: 0 10px 0 10px;
}

.ft-lines a {
    text-decoration: none;
    color: #959595;
}

.ft-lines a:hover {
    text-decoration: underline;
}
<!DOCTYPE html>
<html>
<body>
	<link rel="stylesheet"type="text/css" href="footer.css">
<footer>
	
	<div class="wrapper">
	<div class="ft-quick-links">
		<h2>Quick Links</h2>
		<ul class="clearfix">
			<li><a href="#">About</a></li>
			<li><a href="#">Media</a></li>
			<li><a href="#">Feedback</a></li>
			<li><a href="#">Privacy policy</a></li>
			</ul>
		</div>
	</div>
		<div class="wrapper">
		<div class="ft-social">
    		<ul class="clearfix">		
     		
			
			<li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
			<li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
			<li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
			<li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
	
			</ul>
		</div>
		</div>
			<div class="wrapper">
			<div class="ft-lines">
			<ul class="clearfix">
				<li><a href="#">Terms of Use</a></li>
				<li><a href="#">Content Guidelines</a></li>
				<li><a href="#">Report error </a></li>
				</ul>	
				<div class="copy-rights"><p> ©  2017 Rodeo labs. All rights reserved</p>
			</div>
	</div>
	</div>
	</footer>
	
	</body>
</html>

Solution

  • Is there any specific reason why you are using relative position in the wrapper class? Also you have set the width for the the wrapper classes as 1100px which is probably not correct. I changed the CSS in your wrapper class and the output seems to be like you want it to be. 

    .wrapper{
    width: 100%;
    margin:0px auto;
}

    As you can see, I removed the position: relative and changed the width to 100%. Also, you have included the CSS import tag inside the body tag. It should be inside the head tag. Hope this helped you.