CSS layout issue.

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;

Please include all relevant code in the question itself, not only on a third party site, in a [mcve]. — Heretic Monkey, May 17 '17 at 17:42
Michael, that is exactly what I needed. without me doing a deep dive into your changes, WHERE exactly did you make the changes? — sheltk68, May 19 '17 at 02:05

score 0 · Answer 1 · answered May 17 '17 at 17:40

@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 *

CSS layout issue.

1 Answers1