Alignment problem with icons on page in coding named <section>

Greetings All,

Im new to CSS and bought a program to help me out, have perused w3.org, youtube, and other sources trying to pick up tricks and tips, but still find myself getting stuck.

Ive tried to create a sprite for a site but am unable to get it to center. Ive tried assigning sizes and putting it into a div, but nothing I have tried works. Is there a better way of doing this other than putting it in a <section> or eliminating the display: block;?

<style type="text/css">

section {
background: #E7DEC6;
}
ul.socialicons {
list-style: none;
}
ul.socialicons li {
width: 16px;
height: 16px;
padding: 0 2px 0 0;
float: left;
}
ul.socialicons li a {
width: 16px;
height: 16px;
display: block;
background-image: url("http:/social_images/social_sprite.png");
background-repeat: no-repeat;
}
ul.socialicons li a.facebook { background-position: 0px 0px;
}
ul.socialicons li a.facebook:hover { background-position: -17px 0px;
}
ul.socialicons li a.twitter { background-position: 0px -17px;
}
ul.socialicons li a.twitter:hover { background-position: -17px -17px;
}
ul.socialicons li a.youtube { background-position: 0px -34px;
}
ul.socialicons li a.youtube:hover { background-position: -17px -34px;
}
ul.socialicons li a.flickr { background-position: 0px -51px;
}
ul.socialicons li a.flickr:hover { background-position: -17px -51px;
}
ul.socialicons li a.blog { background-position: 0px -68px;
}
ul.socialicons li a.blog:hover { background-position: -17px -68px;
}
</style>

<section>
<ul class="socialicons">
<li>
<a class="facebook" href="" target="_blank"></a>
</li>
<li>
<a class="twitter" href="/images"></a>
</li>
<li>
<a class="youtube" href="/images"></a>
</li>
<li>
<a class="flickr" href="/images"></a>
</li>
<li>
<a class="blog" href="/images"></a>
</li>
</ul>
</section>

I am trying to learn CSS coding and dont simply want to rely on programs that do everything without me possessing an understanding of what the coding does.

Thank you in advance.