Why my input doesn't fit into the div?
css, html
Solution
Add `box-sizing: border-box;` property to your `input` styles. The result.
Problem
I wrote this html and css codes: 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> ``` I'm trying to fit an input into a div but I'm failing and don't know why (CSS code is on JSFiddFiddle). I reached these two options http://jsfiddle.net/rmkc55zc/ http://jsfiddle.net/rmkc55zc/3/ In option 1 input width is 100% but then input is longer than div. In option 2 I added `overflow: hidden` but then input is cut and I don't like that. Does anybody knows something else I can try to fix it? Thanks