Alignment issues with social bar in CSS (bootstrap) class="sticky-bar"

Question

Disclaimer: I'm a Python coder learning to use CSS/html etc etc

Right guys/gals, I'm just working on a sticky bar for my website, and from the picture you will see that the social bar is mis-aligned. Please see attached image. (It's long)

I have used:

* {border: dashed blue 1px;}

within the CSS to see if my divs weren't aligned correctly, but they seem fine.

Here is the html in question (links removed):

<div class="sticky-bar">
    <div class="sticky-bar-inner">
        <p>&#169;2015 The astrobox.io Project<p>
        <ul id="footerlist">
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
        </ul>
    </div>
</div>

The CSS in question is:

.sticky-bar {
    background: #000000;
    bottom: 0;
    color: #ffffff;
    font-weight: 600;
    left:0;
    margin: 0;
    opacity: 0.95;
    padding: 0em;
    position:fixed;
    width: 100%;
    z-index:99999;
}

.sticky-bar-inner {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color: #ffffff;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #000000;
}

.sticky-bar-inner p {
    margin:0 auto;
    padding: 3px;
    text-align: center;
    width:100%;
}

#footerlist li {
    display: inline;
    list-style-type: none;
    /*padding-right: 5px;*/
}

The images are also 512x512 pinned down to 42x42 with the src (could this be a reason) and they are homogenous and come as a set.

If anyone could suggest a fudge fix or better still why it is not aligning correctly I would be very grateful.

Thankyou

Answer 1

Your list has default padding you should remove since it's pushing the contents over to the right a bit:

#footerlist {
    padding-left:0;
}