CSSの幅が正しくない/わかりません

Question

幅60％のコンテンツセクションがあります。私は40％の幅のテキスト入力を得ました。その入力フィールドの横に、送信ボタンがあります。 私の知識によると、入力フィールドとコンテンツセクションの両方が同じ幅になるはずです。 | _________ 40％_________ || ____ 20％____ |
| _______________ 60％________________ |
しかしそうではありません。
HTML：

<input id="plannername" placeholder="Name eingeben" type="text"></input><!-- 

--><input id="plannersubmit" type="submit" value="eintragen"></input> 

<div id="content"></div> 

CSS：

#plannername{ /* The text input */ 
    width:40%; 
    background-color:#9eefbc; 
    margin-left:20%; 
    border:0; 
    font-size:2em; 
    padding:20px; 
} 
#plannersubmit{ /* The submit button */ 
    width:20%; 
    background-color:#6dce91; 
    border:0; 
    font-size:2em; 
    padding:20px; 
    transition:.2s ease-in-out; 
} 
#content{ 
    width:60%; 
    background-color:#9eefbc; 
    height:500px; 
    margin-left:20%; 
    padding-top:70px; 
    margin-top:3px; 
} 

私の完全なコードはここにある：http://codepen.io/tobiasglaus/pen/xgBeaJ

Answer 1

あなたは、入力ボックスにpaddingセットを持って、それを全体の幅の一部を作るために、あなたはbox-sizing: border-box;を設定するか、普遍的に設定します：

* { 
    box-sizing: border-box; 
} 

擬似要素を含む一般的な方法は次のとおりです。

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

注意、いくつかのデフォルトのパディングとボーダーセットは手動で任意のを設定しなかった場合でも、入力要素のほとんどのブラウザからもあります。上記の解決策は引き続き適用されます。

Answer 2

埋め込みには、box-sizing: border-boxを使用する必要があります。以下を追加してみてください：

* { 
    box-sizing: border-box; 
} 

か、必要に応じて個々のdiv年代にそれを追加することができます。