Struggling to create a social media menu for my about page, I can't seem to get it aligned properly within another div or on its own. It appears slightly off center and I'd like it to either float left with a 100px margin or be nested in the other div. There's another centered div on my page acting as a nav bar.
HTML
<div class="center">
<div id="social" class="ul li">
<ul>
<li>
<div class="caption">Linkedin</div>
<img src='linkedin.png'/>
</li>
<li>
<div class="caption">Twitter</div><img src='twitter.png'/>
</li>
<li>
<div class="caption">Github</div>
<img src='github.png'/>
</li>
<li>
<div class="caption">Facebook</div><img src='facebook.png'/>
</li>
<li>
<div class="caption">Instagram</div>
<img src='instagram.png'/>
</li>
<li>
<div class="caption">Hangouts</div>
<img src='hangouts.png'/>
</li>
<li>
<div class="caption">Yelp</div>
<img src='yelp.png'/>
</li>
<li>
<div class="caption">Pinterest</div>
<img src='pinterest.png'/>
</li>
</ul>
</div>
</div>
</div>
CSS
.social ul li div {
display: none;
text-align: center;
position: absolute;
top: 45px;
jQuery
$('ul li').mouseenter(function () {
var image = $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function () {
var image = $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});