css - この要素内のテキストを中央揃えにするか、デッドスペースをオーバーライドしますか?

Question

ここで何が問題なのかわかりませんが、この要素の内側には、私が何をしても反応しないデッドスペースが左側にあります。要素内のテキストを中央に配置したい（中央に配置されているが、考慮されていないように見える左側に空白があるだけである）。ここに写真があります：

左側のパディングが右側のパディングよりもはるかに大きいことがわかります。手動で設定しようとしましpadding-leftたが、うまくいきませんでした。

ページの要素は次のとおりです（私はレールを使用しています）：

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

そしてbox要素

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

Answer 1

提案に感謝します（特にtechvineet）。これで動作しました：

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

Answer 2

追加

text-align: center;

CSS の .box に。

Answer 3

あなたのCSSクラスを.box center代わりに変更してください.box