Mailchimp code to make two button next to each other

Question

I am not the best with code so would love help with this. After doing some research I have created two buttons next to each other on Mailchimp using their code option. However these buttons appear joined and I cant get a space in between them.

Would love to know any solutions you may have

This is my code atm:

<table border="0" cellpadding="0" cellspacing="10%" style="background-color:#009688;" width="100%">
  <tbody>
    <tr>
      <td align="left" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="mailto:[email protected]" style="color:#FFFFFF; text-decoration:none;" target="_blank">Ask us how</a></td>
      <td align="right" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="http://corpsolutions.brother.com.au/" style="color:#FFFFFF; text-decoration:none;" target="_blank">Find out more</a></td>
    </tr>
  </tbody>
</table>

Answer 1

Your buttons do not appear to have space between because the background color is being applied to the table. Move this style to the individual cells, or better yet to the links themselves.

<table border="0" cellpadding="0" cellspacing="10%" width="100%">
<tbody>
    <tr>
        <td align="left" valign="middle">
            <a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="mailto:[email protected]" target="_blank">Ask us how
            </a>
        </td>
        <td align="right" valign="middle">
            <a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="http://corpsolutions.brother.com.au/" target="_blank">Find out more
            </a>
        </td>
    </tr>
</tbody>
</table>

Answer 2

Just add a column between them, then control the widths. Note I had to set cellspacing="0" as well

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#009688;" width="100%">
<tbody>
<tr>
<td align="left" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="mailto:[email protected]" style="color:#FFFFFF; text-decoration:none;" target="_blank">Ask us how</a></td>
<td style="background-color:#FFF; text-decoration:none;">&nbsp</td>
<td align="right" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="http://corpsolutions.brother.com.au/" style="color:#FFFFFF; text-decoration:none;" target="_blank">Find out more</a></td>
</tr>
</tbody>
</table>