Center text inside this element/override deadspace?

Question

I'm not sure what the problem is here, but inside of this element there's some deadspace off to the left that doesn't respond to anything I do. I want to center the text inside the element (and it is centered, only there's some void space to the left that doesn't seem to be taken into account). Here's a picture:

You can see how the padding on the left is much greater than the padding on the right. I tried to manually set padding-left but that didn't work.

here's the element in the page (i'm using rails):

<div class="holder round clear eval_body">
  ...
  <div class="box center">
    Before continuing to the next student, 
    <br />please take a moment to review the scores for <%= @student.name %>.
    <br />  
    <span class='strong'>
      Once you have submitted them, they cannot be changed!
    </span>
  </div>
  ...
</div>

and the box element

.box {
    position: relative;
    bottom: 3px;
    left: 10em;
    width: 50%;
    height: 8%;
    background: #B05C37;
    border: 3px solid #902D00;
    color: #fff;
}

Answer 1

thanks for the suggestions (especially techvineet). Got it working with this:

.box {
    position: absolute;
    bottom: 3.5%;
    right: 7%;
    margin: 5px;
    padding: 20px;
    width: 50%;
    background: #B05C37;
    border: 3px solid #902D00;
    color: #fff;
}