title: padding in background image aligned to the right
body: <p>I have this html:</p>
  
  <pre><code>&lt;div class="warning"&gt;
      &lt;span&gt;text text text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this css:</p>
  
  <pre><code>.warning
  {
      background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center; 
      border:solid 1px red;
      margin:5px;
      color:#000000;
      font-weight:bold;
      padding-top:3px;
      padding-bottom:3px;
      padding-left:3px;
      padding-right:18px;
  }
  </code></pre>
  
  <p>This is the result:
  <img src="https://i.stack.imgur.com/nPtIu.jpg" alt="enter image description here"></p>
  
  <p>The problem is that the background image that aligned to the right don't have padding between it and the border. How can I add a padding between the image and the border?
  (I cannot add elements to the div!)</p>