Question

Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that’s 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?

both lists have classes of .social-media and .top-nav

*** HTML ******

 <div id="gezzamondo">

 <div class="header">

 <img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo"  />

 <ul class="top-nav">
 <li><a href="#">About</a></li>
 <li><a href="#">Work</a></li>
 <li><a href="#">Contact</a></li>
 </ul>

 <ul class="social-media">
 <li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
 <li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
 <li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
 </ul>


 </div><!-- close header -->
 </div><!-- close gezzamondo -->

** CSS ****

 body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
 }

 img{
max-width:100%:
 }

 #gezzamondo{
width:100%;
margin:0 auto;
 }

 .header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
 }

 #gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
 }

 #gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;

 }

 #gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
 }

 #gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
 }

 #gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
 }

 #gezzamondo .social-media li img{
height:44px;
width:44px;
 }

 #gezzamondo .social-media li{
float:left;
margin-right:15px;
 }

 #gezzamondo .social-media li.last{
float:left;
margin-right:0px;
 }

 #gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
 }

Answer 1

you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.