Silly question, but how do you position the:
  • facebook like button;
  • tweet button;
  • twitter follow button;
  • pin it button?

I have put them all into an <ul id="social">:

HTML Code:
<ul id="social">
	<li><div class="fb-like" data-href="" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="lucida grande"></div></li>
	<li><a href="" class="twitter-share-button" data-url="" data-size="large">Tweet</a>
<script>Usual javascript to load the button on my site here</script></li>
	<li><a href="" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @twitter</a>
<script>Usual stuff</script></li>
	<li><a href="//" data-pin-do="buttonPin" data-pin-config="beside"><img src="//" /></a></li>
I then have my css as:
#social {
width: 100%	

ul#social li {
display: inline;	
width: 25%;
Surely that should work? Page is live at: