Почему мой вход не вписывается в div?

HTML

<body> 
    <div id="container"> 
     <div id="containerHeader"> 
     <h1>Seek & enjoy</h1> 
     <h3>Your movie seeker</h3> 
     <div id="containerForm"> 
      <form class="form-wrapper cf"> 
      <div id="inputplusbuttons"> 
       <input type="text" placeholder="Find your movie" required> 
       <div id="containerButtons"> 
       <button id="seek" type="submit">Seek</button> 
       <button id="reset" type="submit">Reset</button> 
       </div> 
      </div> 
      </form> 
     </div> 
     </div> 
     <div id="results"> 
     <p> 
     </p> 
     <div id="movieList"> 
     </div> 
     <div id="movieDetails"> 
     </div> 
     </div> 
    </div> 
    </body>

Я подстраиваться вход в DIV, но я неудачу и не знаю, почему (код CSS на JSFiddFiddle). Я достиг этих двух вариантов

в варианте 1 ширина входного составляет 100%, но затем ввести больше, чем дел. В варианте 2 я добавил overflow: hidden, но затем ввод разрезается, и мне это не нравится.

Кто-нибудь знает что-то еще, я могу попытаться исправить это?

Благодаря

источник

2014-11-27 Noob_Number_1