I am trying to increase the space between the image and text in this link top bar. 

Link: <https://pushdaddy2.myshopify.com/>

I tried `&nbsp;` which is normal to use for increasing the whitespace but it just prints the `&nbsp;` character.

```
  <span id="pab_message" style="color:inherit;">&amp;nbsp;&amp;nbsp;All t-shirts are 15% off </span>

```

Can anyone say is there any criteria to use `&nbsp;`?

Here is the complete html: 

```html
<div id="pab_bar" style="text-align: center; margin: 0px; padding: 4px 10px;
    left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; 
    background-color: rgb(34, 34, 34); color: rgb(255, 246, 169); font-size: 20px; 
    line-height: 25px; font-family: Sacramento;">
    <div id="pab_content" style="text-align:center; display: inline-block;">
        <img src="https://img.pngio.com/truck-icon-myiconfinder-png-of-transportation-vehicles-256_256.png" 
            width="30" style="vertical-align:middle">
        <span id="pab_message" style="color:inherit;">All t-shirts are 15% off </span>
        <img src="" width="30" style="vertical-align:middle">    
        <span style="display:inline-block;">
            <a id="pab_button" style="outline: none; border: none; line-height: 2em; 
                padding: 0px 1em; margin: 0px 0px 0px 1em; display: inline-block; 
                border-radius: 0.25em; cursor: pointer; width: auto;
                height: inherit; font-family: inherit; font-size: 0.875em; 
                text-align: center; text-decoration: none; 
                -webkit-appearance: none; color: rgb(255, 246, 169); 
                background-color: rgb(0, 0, 0);" type="button" href="#" 
                onclick="pab_button_on_click(event)">Check the product</a>
        </span>
    </div>
</div>
```