Solution #3, use calc() on the input's width

Account for the input's total size calculated by content-box by using calc(100% - 2px);

Rationale: The browser's default padding-left and padding-right are each 1px. "Width" on a content-box box sizing is width + padding-left + padding-right + border-left + border-right.

The CSS calculator can be used to dynamically compute values.

By using calc(100% - 2px), we are explicitly setting the width property to account for that extra 1px from padding-left and the additional 1px from padding-right.

View the CSS changes inside the "style" tag of solution3.html to see the code for this fix.


Here are some hints:

Hint 1
Click Here to toggle a border around the form element. Zoom in on the right side of the box to see how the input and button relate to the border. It looks like the text input is wider than its container. Why would that be the case?
Hint 2
Measure how many pixels wide the text input takes vs. how many pixels wide the button element occupies. Go to style.css and change the width on the input and button element to 500px; There is still the mismatch.
Hint 3
Are there properties such as margin, padding, or border that your browser applies automatically?
Hint 4
What size or other properties might browsers be defaulting to? For example, almost every element in HTML defaults its "box-sizing" property to be "content-box". That means that the total width of an element is not only its width property but a sum of border-left, padding-left, width, padding-right, and border-right...
Hint 5
What do you find and see when you search a search engine for "HTML text input and button element not lining up with same width property in CSS"?