title: HTML Input right padding on 100% width
body: <p>This is a problem I am always having.</p>
  
  <p>The following HTML:</p>
  
  <pre><code>&lt;form id="sy_login"&gt;
      &lt;ul class="form_column"&gt;
          &lt;li&gt;    
              &lt;input id="sy_login_username" name="sy_login_username" placeholder="Username"&gt;&lt;/input&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"&gt;&lt;/input&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Followed by the following CSS:</p>
  
  <pre><code>@CHARSET "ISO-8859-1";
  
  body {
      background: #DDDDDD;
      padding:0px;
      margin:0px;
  }
  
  input[placeholder], [placeholder], *[placeholder] {
      font-style:italic;
  }
  
  .form_column {
      list-style-type: none;
      padding: 0px;
      margin: 10px 10px 10px 10px;
      width:100%;
  }
  
  .form_column input, .form_column textarea, .form_column select {
      width: 100%;
  } 
  </code></pre>
  
  <p>Yields the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/ZR2ns.png" alt="enter image description here"></p>
  
  <p>This is a firebug inspect of one of the input fields.</p>
  
  <p><img src="https://i.stack.imgur.com/cAmYc.png" alt="enter image description here"></p>
  
  <p>From what I can tell, <code>ul</code> is clipping out of the parent <code>form</code> due to the margin.</p>
  
  <p><img src="https://i.stack.imgur.com/yLang.png" alt="enter image description here"></p>
  
  <p>I need the <code>ul</code> to consist of a margin whilst having a width of 100% and for the <code>inputs</code> to also be 100% in width.</p>
  
  <p>Updates:</p>
  
  <p>I attempted replacing the margin with padding as that would have had the same intended desired effect, but it looked exactly the same.  I really want to avoid a case of having to use static widths on the inputs themselves.</p>
  
  <p>Another note that might prove useful for answering is that this only needs to work in HTML5, a cross standards solution would be good, but there is technically no need.</p>
  
  <p>After removal of width:100%</p>
  
  <p><img src="https://i.stack.imgur.com/sbYor.png" alt="enter image description here"></p>
  
  <p>It is now looking much better.  However I have highlighted the problem with the input, the input needs padding for the text, yet the width of the <code>ul</code> must be dynamic to the parent form, with itself must have a dynamic width to the window.</p>