title: 100% width extends past parent element
body: <p>I'm using HTML and CSS to code a card-like button. </p>
  
  <p>For some reason, the <code>width</code> of the text under the image always extends past the edge of the parent <code>div</code>.</p>
  
  <p>I can adjust to make it relatively unnoticeable when viewing on desktop, but it becomes a real pain when it comes to viewing on mobile devices.</p>
  
  <p><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>.card {
    width: 20%;
    box-shadow: 0px 0px 10px gray;
  }
  .card:hover {
    box-shadow: 0px 0px 20px black;
  }
  .card-img {
    width: 100%;
  }
  .card-title {
    margin: 10px;
    display: inline-block;
    font-family: Open Sans;
    text-align: center;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    &lt;img class="card-img" src="http://prww-weather.com/logo.png" /&gt;
    &lt;p class="card-title"&gt;Card Title&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know why <code>card-title</code> extends past the edge of <code>card</code> and how I can fix it?</p>
  
  <p>I think it has something to do with the <code>inline-block</code> assigned to the <code>card-title</code> class, but if I don't include that, the <code>margin</code>s of <code>card-title</code> and <code>card-img</code> collapse .</p>