Solution #1, set padding: 0px;

Line up the text-input and button elements by setting the input's padding to 0px;

Rationale: The browser default styling on the text input sets padding automatically.

Because text inputs default to having a "box-sizing" of "content-box", the total width of the input element was the width property 100% plus the extra pixels added by the default padding.

Setting the text input's padding to 0px means that the total width is the width property + zero padding + zero border, so it lines up with the button below.

View the CSS changes inside the "style" tag of solution1.html to see 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"?