Aligning a button link within a container div - html

Question

I've created a button but I'd like to align it within a container div so it looks like:
My code is:
body {
background-color: black;
}
.buttoncontainer {
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
#button2:hover {
background-color: #feb73b;
}
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 20px;
}
HTML
<div class="buttoncontainer">
start a free trial
</div>
Link to Fiddle
Any advice?
Apologies for not posting the links as pictures, I do not have enough reputation yet.

Answer 1

Remove margin-top: 20px; from your #button2 CSS
See the fiddle
Thus the CSS would be like
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
/* margin-top: 20px; */
}
UPDATE
See the updated fiddle
I've changed the padding in the css as padding: 14px 32px;. So it gets centered.

Answer 2

In button2' style :
Remove margin-top
Set display as block
Then :
width:100%;
height:100%;
box-sizing: border-box;
Fiddle : http://jsfiddle.net/by3pe47d/7/

Answer 3

So what I did was swap the id's and class and I added the button 2 class to the html.
I added a position: relative; attribute to the container so the insides would stay inside.
Also if you want to change the position of it like left, right, etc. you can.
I also changed the top margain to 2px instead of 20px
http://jsfiddle.net/by3pe47d/10/
Html-
<div id="buttoncontainer">
<div class="button2">
start a free trial
</div>
</div>
Css-
body {
background-color: black;
}
#buttoncontainer {
position: relative;
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
.button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 2px;
}
.button2:hover {
background-color: #feb73b;
}
Large Update
Saw the image that was removed and made a thing that mimics it. It will stay formatted even if you use the left, right, etc. attributes.
http://jsfiddle.net/by3pe47d/11/