幅の制限を超えると、コンテナ内のテキスト領域のスペースが均等に増加します - css

Question

このテキストエリアのサイズを均等に増やそうとしています。しかし、それを100％幅からそれ以上に変更すると、それは右側にのみ増加します。私は余白の自動とディスプレイのブロックを試みたが、doesntの仕事。

textarea[form="chform"] { 

    width: 100%; 
    height: 230px; 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.6); 
    border-radius: 2px; 
    color: grey; 
    font-family: 'Exo', sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    padding: 4px; 
    margin-top: 10px; 
    resize:none; 
} 

.profile__form{ 
    padding: 15px; 
    margin: auto; 
    border-radius: 50%; 

} 
.profile_container { 
    width: 400px; 
    margin: 120px auto 120px; 
    /*background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), #f0f0f0, rgba(223,190,106,0.7));*/ 
    padding: 0 20px 20px; 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.075); 
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.075); 
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.075); 
    text-align: center; 
} 

ヒスイ：

HERE

extends layout 
block content 
body(style='background-color:black') 
    link(href='http://fonts.googleapis.com/css?family=Great+Vibes', rel='stylesheet', type='text/css') 
    div.right 
     if(user) 
      a Welcome #{user.name} 
      | &nbsp 
      a(href='/main') Home 
      | &nbsp 
      a(href='/profile') Profile 
      | &nbsp 
      a(href='/logout') Logout 
     else 
      a(href='/main') Home 
      | &nbsp 
      a(href='/register') Register 
      | &nbsp 
      a(href='/login') Login 

    div.profile_container 
     form.profile__form(role='form', action="/add-chapters",id="chform" method="post", style='max-width: 800px;') 
      .profile__form-heading Add Chapter 
      input.form-control(type='number', min="1" name="chapterNumber", id="inputChapterNumber" placeholder='Chapter Number') 
      br 
      input.form-control(type='text', name="chapterTitle", id="inputChapterTitle", placeholder='Title') 


     textarea(name='chapterStory', cols='30', rows='5', form="chform", placeholder="Enter Story") 
     br 
     button.chform(type='submit') Save 

は、私がこれまでの幅を増加させた後見るもののイメージである は、ここに私のCSSです。だから私は、親コンテナの増加幅でそれを固定 https://i.stack.imgur.com/dbtiY.jpg

：

https://i.stack.imgur.com/xSBdL.jpg

編集：[OK]を追加親CSS NOW FIXED

Answer 1

IMAGE私は大きなテキストエリアと中心をしたいですプロファイルフォームとプロファイルコンテナその後、相対、表示ブロック、マージンの自動位置を設定します。シンプル！

textarea[form="chform"] { 

    width: 70%; 
    height: 500px; 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.6); 
    border-radius: 2px; 
    color: grey; 
    font-family: 'Exo', sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    padding: 4px; 
    resize:none; 
    position: relative; 
    display:block; 
    margin:auto; 
    margin-top: 10px; 




}