Form inputs in the header/footer are off-center

[rsonger]

Hi, first-time contributor here. Thanks for this awesome project! It really saves me a lot of time so I can focus on the backend of my project :)

The rules for input, select, textarea apply a 1rem right margin that pushes the form controls off-center when placed in center-aligned regions such as headers and footers.

The screenshot below shows a language select form placed in the footer of a page. The select control has a 16-pixel right margin pushing it off-center as can be seen relative to the submit button and paragraph below it.

Here is HTML source that produced the effect in Chrome v103:

<footer>
  <form action="/setlang/" method="post">
    <select name="language">
      <option value="en" selected="">
        English (en)
      </option>
      <option value="ja">
        日本語 (ja)
      </option>
    </select>
    <input type="submit" value="Go">
  </form>            
  <p>Request received: July 14, 2022, 10:44 a.m.</p>
</footer>

The submit button does not have the right margin applied due to a separate margin rule applied elsewhere under the input[type="submit"] selector. That slight difference is how I was able to notice this issue in the first place.

Perhaps creating a ruleset just for the textarea, input, and select controls inside headers and footers is the best solution?

[lkhrs]

This was added in #93 to fix a weird Firefox bug:

To reduce complexity and future bugs, I think we should either let the browser set the input field widths (option A), or set them to 100% (option B). Option B would look more uniform. If we go with option A, users can control the initial width by using the size="" attribute in <input>.