title: Make a button fill the full width of container element?
body: <p>I'm converting from using <code>div</code>'s as buttons to actual buttons, and now I need to make buttons fill the full width of the container. </p>
  
  <p><img src="https://i.stack.imgur.com/g9rpF.png" alt="enter image description here"></p>
  
  <p>Code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    background-color: #ddd;
    padding: 10px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .button {
    display: block;
    background-color: #bbb;
    margin: 10px;
    padding: 10px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="button"&gt;
      Fills the full width
    &lt;/div&gt;
  
    &lt;button class="button"&gt;
      Does not fill the full width
    &lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Adding <code>display:block</code> to <code>.button</code> does not work (although I'm sure that has got to be part of at the answer?), and neither does <code>left: 0; right: 0</code>. <code>width: 100%</code> sort of works, but it ignores the container's padding property and makes the button go too close to the right side of the container.</p>
  
  <p>Here is the JSFiddle: <a href="http://jsfiddle.net/mn40mz2n/" rel="noreferrer">http://jsfiddle.net/mn40mz2n/</a></p>