After finishing this module I preceded to apply some of the knowledge learnt to one of my own little projects. On my page I have a similar look to the lesson however I am using from top to bottom an <input type="text> followed by a and then another set of <input type="text> followed by another element.
It then becomes obvious that the width of the select element is not the same as the <input type="text> element. The select element is slightly shorter. In fact if you look at the freeCodeCamp solution this is also the case. You don’t really notice it easily in the freeCodeCamp form because it is at the bottom of the page and only used once. Is there any fix for this?
All I could think of to do was to take out and separate select from here and give input and textarea a width of 99% -
input, textarea {
margin: 10px 0 0 0;
width: 99%;
min-height: 2em;
}
then make a seperate
select {
width: 100%;
}
but it still looks kind of odd. Maybe it’s my browser? I should install a few other browsers and see how they render.