CSS layout issue. - html

Question

I am working on a calculator layout and have a small issue with the layout. On the right side of the calculator, the black spacing on the edge of the calculator is slightly off. I've been banging my head trying to figure it out and was hoping that I could get some assistance with it. I have attached the link to the codepen for your review.
Click here to go to my Codepen
My CSS code is listed below:
.button-container > a {
width: 50px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;

Answer 1

#import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
.button-container {
width: 209px;
height: 255px;
background: #1a1a1a;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.button-container > a {
width: 51px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
}
.calc-container{
height: 129px;
width: 209px;
background: black;
padding: 8em 0em ;
border-radius: .5em;
}
body {
background: #25383C;
margin: 10em 0 10em 40em;
}
.button-container .buttonE {
width: 51px;
height: 100px;
float: right;
margin: 0 auto ;
padding: 0px;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;
border-bottom-right-radius: .5em;
}
.button-container .button0 {
width: 155px;
height: 48px;
float: left;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
border-bottom-left-radius: .5em;
}
#blue {
color: #008b8b;
}
Please use the above CSS
there was margin issue *.button-container .buttonE *