テーブル内のテーブルセルを水平に整列する

Question

このテーブルセル内のテキストを水平に整列するにはどうすればよいですか？それは右に浮いているように見えますが、私はなぜそれがわかりません。 https://jsfiddle.net/o06e11o9/

HTML

<div class="affil2"> 
    <div class="oval2"></div> 
    <div class="contents"> 
    a lorem ipsum dolor sit amet. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, tempor a tortor. 
    <br /> 
    <br /> Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. 
    </div> 
</div> 

CSS

.affil2 { 
    align-content: center; 
    display: table; 
    text-align: center; 
    z-index: 20; 
    border: 1px solid #705A1D; 
    position: relative; 
    height: 200px; 
    width: 960px; 
    background-color: #af9254; 
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .35); 
} 

.contents { 
    margin: 0 auto; 
    text-align: left; 
    width: 600px; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
} 

.oval2 { 
    z-index: 1; 
    position: absolute; 
    top: -110px; 
    width: 1200px; 
    height: 250px; 
    border-radius: 100%; 
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 0, 0, 0) 100%); 
} 

Answer 1

あり、あなたのコード内の多くの奇妙なことがありますが、あなたのソリューションのためにあなたを変更することができます。

width: 100%;とクラスcontents

.contents { 
    margin: 0 auto; 
    text-align: center; 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
} 

JsFiddle Link

Answer 2

CSS

.contents { 
    padding-left: 200px;//hfhaunter 
    padding-right: 200px;//hfhaunter 
    margin: 0 auto; 
    text-align: center; 
    width: 100%;//thank you pablo cesar cordova morales 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
}