title: Why are the divs not expanding to the full width of the parent div
body: <p>Fiddle: <a href="https://jsfiddle.net/eze5x9t9/" rel="nofollow noreferrer">https://jsfiddle.net/eze5x9t9/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"&gt;
      &lt;div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;"&gt;
  
          &lt;span style="font-size: 35px;display: table-cell;vertical-align: middle;"&gt;My Name&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;"&gt;
          &lt;span style="font-size: 20px;display: table-cell;vertical-align: middle;"&gt;My Job&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/Veryp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Veryp.png" alt="enter image description here"></a></p>
  
  <p>Why is there a green space at the end? The fiddle was done in Chrome.</p>