title: Elements inside main div exceed width
body: <p>I have the children elements <code>width</code> set to <code>100%</code>, but the <code>width</code>s exceed the <code>width</code> of the parent <code>div</code>.</p>
  
  <p><strong>Code:</strong>    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.MainFrame {
    max-width: 750px;
    height: auto;
    margin: auto;
    padding: 5px;
    background-color: grey;
  }
  div.Status {
    float: left;
    width: 100%;
    height: auto;
    margin: 5px;
    padding: 5px;
    border: 3px solid;
  }
  div.Disclaimer {
    float: left;
    width: 100%;
    height: auto;
    margin: 5px;
    padding: 5px;
    border: 3px solid;
  }
  div.Settings {
    float: left;
    width: 100%;
    height: auto;
    margin: 5px;
    padding: 5px;
    border: 3px solid;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="MainFrame"&gt;
    &lt;div class="Status"&gt;
      &lt;center&gt;
        &lt;h1&gt;Home Screen&lt;/h1&gt;
      &lt;/center&gt;
      &lt;center&gt;Waiting for a command from the user.&lt;/center&gt;
    &lt;/div&gt;
    &lt;div class="Disclaimer"&gt;
      &lt;h3&gt;This page will be used to direct user to other tools.&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="Settings"&gt;
      &lt;h2&gt;Settings&lt;/h2&gt;
      &lt;form method="post" action="/Download/"&gt;
        &lt;input type="submit" name="download" value="Download"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>