html - How to move around text in div? -

i building simple calculator application. trying text inside result bar move left few pixels , center vertically. i've tried using:

vertical-align:center;   

but did not work,

codepen: http://codepen.io/roryavant8/pen/jgmjyz

css:

#calculator {   margin: auto;   left: 50%;   display: block;   width: 400px;   height: 400px;   background-color: black;   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;   border-style: solid;   border-color: lime;   box-shadow: 5px 7px 5px 1px grey, inset 2px 2px 10px 0px grey; }  #resultbar {   width: 150px;   background-color: lime;   height: 30px;   border-radius: 10px;   box-shadow: inset 1px 0px 5px 1px white;   margin-top: 30px;   margin-bottom: 20px;   margin-left: auto;   margin-right: auto;   font-size: 14px;   text-align:right;  }  button {   cursor: pointer;   background: lime;   width: 50px;   height: 40px;   margin: 3px; }  .row {   margin-left: 80px;   width: 400px; } 

html:

<div id="calculator">   <div id="resultbar">   </div>   <div class="row">     <button id="ac" type="button" value="89">ac</button>     <button type="button" value="90" id="ce">ce</button>     <button type="button" value="%">%</button>     <button type="button" value="/">/</button>   </div>   <!----closing rowone div-->   <div class="row">     <button type="button" value="7">7</button>     <button type="button" value="8">8</button>     <button type="button" value="9">9</button>     <button type="button" value="*">*</button>   </div>   <div class="row">     <button type="button" value="4">4</button>     <button type="button" value="5">5</button>     <button type="button" value="6">6</button>     <button type="button" value="-">-</button>   </div>   <div class="row">     <button type="button" value="1">1</button>     <button type="button" value="2">2</button>     <button type="button" value="3">3</button>     <button type="button" value="+">+</button>   </div>   <div class="row">     <button type="button" value=".">.</button>     <button type="button" value="0">0</button>     <button type="button" value="ans">ans</button>     <button type="=" value="=">=</button>   </div> </div> <!-----closing calculator div---> 

put in #resultbar

padding-top:10px; padding-right:5px; 

i have tested it, fine me