title: CSS how to push text away from border
body: <p>Basically I have this code for a container which holds widgets at the side of my side:</p>
  
  <p><img src="https://i.stack.imgur.com/HzsG7.png" alt="enter image description here"></p>
  
  <p>However as you can see the text is touching the border. Is there anyway to fix this? I am not too sure how to do this in CSS. </p>
  
  <pre><code>.widget {
      margin-bottom:20px;
      border-style:clear;
  }
  .widget h2 {
      margin:0 0 10px 0;
      padding:0 5px;
      font-weight:normal;
      border-bottom:1px solid #21a1e1;
  }
  .widget .inner {
      margin:0 10px;
      border-style:clear;
  }
  
  /* Aside */
  aside {
      width:260px;
      float:right;
      border-top: 1px solid #21a1e1;
      border-left:1px solid #21a1e1;
      border-right: 1px solid #21a1e1;
      border-bottom: 1px solid #21a1e1;
      padding-left:0px;
  }
  </code></pre>