Solution #2, set box-sizing: border-box;

Setting the input element to use box-sizing of border box will line up the elements.

Rationale: browser default styling for almost every element is content-box. The defaut box-sizing on button elements is "border-box".

Understanding the box model and "box-sizing" is critical measuring values and controlling layout.

By setting the text input's box-sizing model to "border-box", we are instructing the "width" property to ignore any padding.

When writing your CSS, it's a good idea to start with the following in your CSS. The difference between content and border box is easy to forget, and it's *very* nice to have two elements with width of 50% add up to 100% and not 100% plus border plus padding... 

            * { 
              box-sizing: border-box;
            }

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