Can anyone tell me why my input box does not want to take up 100% of its container please.
NB. Not a FCC project.
You probably want to read a bit about box-sizing, but to make it short the default width and height are calculated from the content.
Border and padding will be calculated later.
You can see this in your example by removing the padding on your inputs: they will occupy 100% of the container width.
You can use border-box as a box-sizing value to change this behavior, so that the browser will account for both borders and padding when calculating sizes.
[whatever] {
box-sizing: border-box;
}
Hope this helps 
Edit:
forgot to mention that of course you can simply make your calculation yourself:
width: calc(100% - 62px)
where 62 = 50 + 10 padding + 2 px of border.
This will probably be easier to maintain with css variables 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.