title: background-color of <p> outside of border
body: <p>In my card in example, I have a <code>&lt;p&gt;</code> in green at the bottom which go beyond my border.</p>
  
  <p>I tried to apply an <code>overflow: hidden;</code> to my <code>card-wrapper</code> class but it remove the top of my circle.</p>
  
  <p>How can I get the <code>&lt;p&gt;</code> inside my border?</p>
  
  <p>Thanks for your help!</p>
  
  <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>.card-wrapper {
    border: 1px solid #cce6e6;
    border-radius: 10px;
    margin: 60px 10px 10px 10px;
    position: relative;
  }
  
  .circle {
    border-radius: 50%;
    width: 96px;
    height: 96px;
    background-color: #cce6e6;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .title {
    text-align: center;
    text-transform: uppercase;
    margin: 80px 0 24px 0;
  }
  
  .description {
    text-align: center;
    line-height: 32px;
    margin-bottom: 36px;
  }
  
  .keyword {
    text-align: center;
    color: #2a5555;
    background-color: #cce6e6;
    margin: 0;
    padding: 20px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-wrapper"&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;h5 class="title"&gt;Lorem ipsum&lt;/h5&gt;
    &lt;p class="description"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut felis magna.
    &lt;/p&gt;
    &lt;p class="keyword"&gt;Lorem ipsum&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>