title: How to properly align "AddThis" social buttons with CSS
body: <p>I am trying to align the social media buttons seen at the top of <a href="http://dirtycookie.co" rel="nofollow">dirtycookie.co</a></p>
  
  <p>They are aligned properly but there is a bunch of spacing between them.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="grid_12 socialheader"&gt;
  &lt;!-- AddThis Button BEGIN --&gt;
  &lt;div class="addthis_toolbox addthis_default_style" style="text-align:center;"&gt;
  &lt;a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="http://www.facebook.com/TheDirtyCookie"&gt;&lt;/a&gt;
  &lt;a class="addthis_button_tweet"&gt;&lt;/a&gt;
  &lt;a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.dirtycookie.co" pi:pinit:media="http://distilleryimage6.s3.amazonaws.com/1bf5b1a46d0b11e2914122000a9f1439_6.jpg" pi:pinit:layout="horizontal" always-show-count="1"&gt;&lt;/a&gt; 
  &lt;a class="addthis_button_google_plusone" g:plusone:size="medium"&gt;&lt;/a&gt; 
  &lt;a class="addthis_counter addthis_pill_style"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- AddThis Button END --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.socialheader {
      width: 100%;
      margin: 3px 1px 0px 1px;
      text-decoration: none;
  }
  
  .socialheader a{
      padding: 0px 10px 0px 20px !important;
      margin: 0px !important;
      width: 50px !important;
      display:inline !important;
      text-align: center;
      float: center !important;
      position:relative !important;
      top:0px !important;
  }
  </code></pre>
  
  <p>I cannot figure out what I am doing wrong :/</p>
  
  <p>Ideally, these widgets would be snug together and centered in the middle of the page. It's also worth noting that the pinterest button should have a counter to the right of it, but doesn't. If anyone knows why that is happening, let me know.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks,
  Chris</p>