.container { position: absolute; top: 50%; transform: translateY(-50%); width: 320px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .calculator{ max-width:320px; } .buttons{ display:grid; grid-template-columns: repeat(4,1fr); border:0; } #result { font-family: 'Monospaced', monospace ; background: black; color: white; font-size: 2em; border:0; padding: 0.3em; text-align: right; width: 100%; height: 100px; } .btn { font-size:1em; height: 65px; border:1px solid black; margin: 1px; } .btn:hover{ background: #fff; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }