Gaetan Lodého Gaetan Lodého - 1 year ago 36
CSS Question

UL class seems doesn't work on my footer

I've been coding a website for some friends and since yesterday my ul class doesn't work on my footer. This ul is for displaying social icons and more. When I was coding on my localhost everything was good but since I've put the website on the server it totally messed up :(

Here is the HTML of my footer and the CSS applied on it.

Hope you can help me !

ul.social_icons, {
list-style: none;
position: relative;

ul {
margin:0 0 0 10px;

.footer-social li {

<footer id="colophon" class="site-footer" role="contentinfo">

<div class="site-info">

<p>Copyright © Gaëtan POIDEVIN <span class="sep"> | </span> <a href="" target="_blank">Gaëtan POIDEVIN</a></p>
</div><!-- .site-info -->

<ul class="footer_social">
<li class="social"><a href="" target="_blank"><img class="img-responisve" src=""></a></li>
<li class="social"><a href="" target="_blank"><img class="img-responsive" src=""></a></li>
<li class="social"><a href=""><img class="img-responsive" src=""></a></li>
<li class="social"><img class="img-responsive" src=""></li>
</footer><!-- #colophon -->

Answer Source

I see that you are using width:25% in your li tag but when you use percentage you are saying to li that i want to be 25% of your parent width but your ul doesn't have width so it doesn't work.

When using percentage (%) for width, authors must be aware that the percentage is based on the element's parent, or in other words, the width of the containing block. If your parent is set at 480px then the percentage is based on that value.

Here you have a jsfiddle for your problem I have added a fixed width for your ulyou can add anything you want even using % but remember what i said for % value. Also i added width:100% to your img so it won't go outside of your li .

Here is a link for more about % width