Multiple buttons CSS issue

Multiple buttons CSS issue

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.
Take a look: http://d.pr/i/QbZw
When I add the CSS to get it to match the rest of the page, the buttons
over lap: http://d.pr/i/BpIc
Here's the HTML:
<div class="button-container back_image">
<img src="Pictures/Footer.jpg" width="1060" height="75">
<button id="prev-button" class="paging-button"
onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button"
onclick="nextPage();">Next Page</button>
</div>
Related CSS:
.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;
}
Any ideas on what I did wrong?