title: Remove padding after opening accordion
body: <p>I have an accordion that I've added rounded corners to, however, each time I open up an element within the accordion, the padding that I've added to include the rounded corners gets attached to the inside of the accordion element. Can anyone consult me on how to get rid of this padding?</p>
  
  <p><a href="http://jsfiddle.net/rgs6vLub/" rel="nofollow noreferrer">http://jsfiddle.net/rgs6vLub/</a></p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.accordion {
      background-color:#000;
      border-radius:10px;
      padding:10px
  }    
  .accordion dt {
      padding:.5em;
      background-color:#456db5;
      cursor:pointer;
      border-bottom:1px solid #355faa;
      font-size:13px
  }    
  .accordion dt:hover {
      color:#fff
  }    
  .accordion .on {
      background-color:#456db5;
      cursor:default
  }    
  .accordion dt,.accordion .on:hover {
      color:#fff
  }    
  .accordion dd {
      padding-left:1em;
      margin:0 auto;
      padding-right:.5em;
      background-color:#fff;
      font-size:14px
  }    
  .accordion dd p {
      padding-top:.5em;
      padding-bottom:.5em
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;dl class="accordion"&gt;
      &lt;dt&gt;Headline&lt;/dt&gt;
  
      &lt;dd&gt;
          &lt;p&gt;Text&lt;/p&gt;
      &lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>Picture:</p>
  
  <p><img src="https://i.stack.imgur.com/3Rgls.jpg" alt="Picture"></p>