Недопустимая ширина 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-х по мере необходимости.