title: margin between HTML5 fields is inaccurate when using a class
body: <p>In the following version of a simple form for <a href="https://codepen.io/SSteven/pen/BeKLav" rel="nofollow noreferrer">"Personal Details"</a>, the margins between the fields are displayed as desired.</p>
  
  <p>The form shows 3 rows of fields:  </p>
  
  <ol>
  <li><p>Row 1 contains the "First Name" field and label.  </p></li>
  <li><p>Row 2 contains the "Last Name" field and label.  </p></li>
  <li><p>Row 3 is the row of interest and contains 2 fields (City and ZIP) between which a gap is displayed correctly, as desired.  </p></li>
  </ol>
  
  <p>(I have displayed a green border for the labels and blue border for the fields, for debugging.)</p>
  
  <p>The relevant CSS is:</p>
  
  <pre><code>#city {
    width: 58%;
    margin-right: 2%;
  }
  
  #ZIP {
    width: 40%;
  }
  </code></pre>
  
  <p>The percentages here are 58, 2 (for the right-margin of the city field and 40, which add up to 100%. Thus these 2 fields fit in the row. As stated, this works correctly, as desired.</p>
  
  <p>However, in the <a href="https://codepen.io/SSteven/pen/arNmvJ" rel="nofollow noreferrer">following version</a> of the same form, instead of specifying the right-margin within the field's CSS itself, I have created a class. Immediately, the layout breaks. The 2 fields (city and ZIP) no longer fit in a row. The ZIP field is then accommodated in the next row. In order to ensure the 2 fields do fit in a row, I then have to adjust the percentages as shown here. But then, the right edge of the ZIP field doesn't align with the right edges of the last field in the other rows.</p>
  
  <p>The relevant CSS is as follows:</p>
  
  <pre><code>.lastfld {
    margin-right: 0;
  }
  
  #city {
    width: 58%;
  }
  
  #ZIP {
    width: 38%;
  }
  </code></pre>
  
  <p>Note that now the percentages (2, 58 and 38) add up only to <strong>98%</strong>, leaving a gap after the ZIP field.</p>
  
  <p>The relevant markup is as follows:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-lbl"&gt;
      &lt;label&gt;City / ZIP&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="col-flds"&gt;
      &lt;input type="text" 
             id="city" name="city" 
             placeholder="City"&gt;
  
      &lt;input type="text" 
             class="lastfld" 
             id="ZIP" name="ZIP" 
             placeholder="ZIP"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to ask:  </p>
  
  <ol>
  <li><p>Semantically, I have not made any change. The change is only in syntax. Earlier, I put the <code>margin-right</code> property directly within the field. It worked. Later I just added it within a class and applied the class to the field in the markup. Yet the row broke. Why does this happen?</p></li>
  <li><p>How can I solve this problem?</p></li>
  <li><p>Is there any other way (using only block/inline-block/float) to get the desired result? <strong>Note that for this snippet, I am not using flex or grid layout</strong>, since this snippet would be part of a progressively enhanced program.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background-color: white;
  }
  
  h1 {
    text-align: center;
    color: navy;
  }
  
  .frm {
    /* border: 1px solid green; */
    width: 700px;
    margin: 0 auto;
    border-radius: 4px;
    padding: 20px 0;
    background-color: #f2f2f2; /* light gray */
  }
  
  .row {
    /*border: 1px dashed red;*/
    width: 100%;
    margin: 18px 0;
  }
  
  /* Clear floats after the columns */
  .row::after {
    display: table;
    clear: both;
    content: "";
  }
  
  .col-lbl {
    display: inline-block;
    /*float: left;*/
  
    border: 1px dotted green;
    width: 100%;
    padding: 12px;
  }
  
  .col-flds {
    display: inline-block;
    float: left;
  
    border: 1px dotted blue;
    width: 100%;
  }
  
  input[type="text"],
  select,
  textarea {
    display: inline-block;
    float: left;
  
    border: 1px solid #ccc; /* light grey */
    margin-right: 2%; /* default right margin */
    padding: 12px 20px;
  }
  
  textarea {
    height: 200px;
    resize: none;
  }
  
  .lastfld {
    margin-right: 0;
  }
  
  input[type="text"]:focus,
  select:focus,
  textarea:focus {
    border: 2px solid #555;
  }
  
  #fname,
  #lname {
    width: 100%;
  }
  
  #city {
    width: 58%;
  }
  
  #ZIP {
    width: 38%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;code&gt;Please watch in full page view&lt;/code&gt;&lt;br&gt;
  &lt;h1&gt;PERSONAL DETAILS - 3&lt;/h1&gt;
  
  &lt;div class="frm"&gt;
    &lt;form action="/action_page.php"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lbl"&gt;
          &lt;label for="fname"&gt;First Name&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="col-flds"&gt;
          &lt;input type="text" class="lastfld" id="fname" name="firstname" placeholder="Your first name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-lbl"&gt;
          &lt;label for="lname"&gt;Last Name&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="col-flds"&gt;
          &lt;input type="text" class="lastfld" id="lname" name="lastname" placeholder="Your last name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-lbl"&gt;
          &lt;label&gt;City / ZIP&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="col-flds"&gt;
          &lt;input type="text" id="city" name="city" placeholder="City"&gt;
  
          &lt;input type="text" class="lastfld" id="ZIP" name="ZIP" placeholder="ZIP"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>