title: Multiple buttons CSS issue
body: <p>So I have a YouTube API that pulls a playlist... If the results are more than 15, it breaks 16-30 into page , 31-45 into page three, etc and has 'next page' 'previous page' buttons for navigating.  </p>
  
  <p>Take a look: <a href="http://d.pr/i/QbZw" rel="nofollow">http://d.pr/i/QbZw</a></p>
  
  <p>When I add the CSS to get it to match the rest of the page, the buttons over lap: <a href="http://d.pr/i/BpIc" rel="nofollow">http://d.pr/i/BpIc</a></p>
  
  <p>Here's the HTML: </p>
  
  <pre><code>  &lt;div class="button-container back_image"&gt;
    &lt;img src="Pictures/Footer.jpg" width="1060" height="75"&gt;
    &lt;button id="prev-button" class="paging-button" onclick="previousPage();"&gt;Previous Page&lt;/button&gt;
    &lt;button id="next-button" class="paging-button" onclick="nextPage();"&gt;Next Page&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Related CSS:</p>
  
  <pre><code>.back_image{
      width: 1060px;
      height:auto;
      margin: auto;
      text-align:center;
      position:relative;
      }   
  .paging-button {
      visibility: hidden;
      position: absolute;
      margin: auto;
      top: 0;
      left:0;
      right:0;
      bottom:0;
      color:#fff;
      height:25px;
      background-color: rgba(0, 0, 0, .3);
      width: 1060px;
      color: white;
      }
  </code></pre>
  
  <p>Any ideas on what I did wrong?</p>