Centering to cells in an html table

I am trying to make 2 cells centered At the moment lines up with one cell taking all the space and the second one just taking the space of the text.

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}

h1 {
  font-size: 16px;
  font-family: Arial
}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.kustomer_rows_container {
  max-width: 600px;
  min-width: 320px;
}

.kustomer_social_anchor {
  color: inherit;
}

.col-1 {
  width: 8.3%;
}

.col-2 {
  width: 16.6%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3%;
}

.col-5 {
  width: 41.6%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3%;
}

.col-8 {
  width: 66.6%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3%;
}

.col-11 {
  width: 91.6%;
}

.col-12 {
  width: 100%;
}

.inner {
  background-image: url('https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
}

a {
  text-decoration: none;
}

<body dir="ltr" style="background-color: #f6f6f6; padding-top: 20px; padding-bottom: 20px;">
  <table role="presentation" class="kustomer_rows_container" style="table-layout: fixed; border-spacing: 0; border-collapse: collapse; word-break: break-word; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%" cellpadding="0" cellspacing="0" border="0"
    align="center">
    <tbody>
      <tr>
        <td>
          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #FFF5F5; background-position: center; background-size: cover; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; ">
            <tbody>
              <tr>
                <td>
                  <table cellpadding="0" cellspacing="0" border="0" class="col-12">
                    <tbody>
                      <tr>
                        <td>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                </td>
              </tr>
            </tbody>
          </table>
          <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; ">
            <tbody>
              <tr>
                <td>

                  <table cellpadding="0" cellspacing="0" border="0" class="col-12">
                    <tbody>
                      <tr>
                        <td>

                          <table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
                            <tbody align="center">
                              <tr>
                                <td style="padding-top: 20px; padding-bottom: 20px;">
                                  <img href="" src="https://cdn.myka.com/digital-asset/banners/SiteLogo.svg" />

                                </td>
                              </tr>

                            </tbody>
                          </table>

                  </table>


                  <table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
                    <tbody align="center">
                      <tr>
                        <td height=30px bgcolor="#ede3db">
                        </td>
                      </tr>
                      <tr>
                        <td style="padding-top: 20px; padding-bottom: 20px;">
                          <h1>We value your opinion. Please rate your experience.</h1>
                          <p>[[sn.org.csat_body]]</p>
                          <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=1">
                            <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg" />
                          </a>
                          <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=2">
                            <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg" />
                          </a>
                          <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=3">
                            <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg" />
                          </a>
                          <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=4">
                            <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg" />
                          </a>
                          <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=5">
                            <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg" />
                          </a>



                          <p><a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&sid={{ satisfaction.id }}&resid={{ responseId }} target="_blank"><button>[[sn.org.csat_button_label]]</button></a></p>
                        </td>
                      </tr>
                      <tr align="left">
                        <td>
                          <h1>I'm unsatisfied</h1>
                        </td>
                        <td>
                          <h1>I'm satisfied</h1>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding-top: 20px; padding-bottom: 20px;">

                          <div class="inner" style="width:100%; max-width:600px;">

                          </div>

                        </td>
                      </tr>
                    </tbody>
                  </table>

                  </td>
                  </tr>
                  </tbody>
          </table>

          </td>
          </tr>
          </tbody>
  </table>


  </td>
  </tr>
  </table>
</body>

How can I fix it so the "I'm unsatisfied" and "sAtifsfied" are in the center and not displaying "Satisfied" All the way to the side?

Solution

The alignment can be tackled with adjustments to the tr alignment, and adjusting the number of cells in some of the rows:

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}

h1 {
  font-size: 16px;
  font-family: Arial
}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.kustomer_rows_container {
  max-width: 600px;
  min-width: 320px;
}

.kustomer_social_anchor {
  color: inherit;
}

.col-1 {
  width: 8.3%;
}

.col-2 {
  width: 16.6%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3%;
}

.col-5 {
  width: 41.6%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3%;
}

.col-8 {
  width: 66.6%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3%;
}

.col-11 {
  width: 91.6%;
}

.col-12 {
  width: 100%;
}

.inner {
  background-image: url('https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
}

a {
  text-decoration: none;
}

<table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
  <tbody align="center">
    <tr>
      <td colspan="2" height=30px bgcolor="#ede3db">
      </td>
    </tr>
    <tr>
      <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
        <h1>We value your opinion. Please rate your experience.</h1>
        <p>[[sn.org.csat_body]]</p>
        <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=1">
          <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg" />
        </a>
        <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=2">
          <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg" />
        </a>
        <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=3">
          <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg" />
        </a>
        <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=4">
          <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg" />
        </a>
        <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=5">
          <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg" />
        </a>



        <p><a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&sid={{ satisfaction.id }}&resid={{ responseId }} target="_blank"><button>[[sn.org.csat_button_label]]</button></a></p>
      </td>
    </tr>
    <tr align="center">
      <td>
        <h1>I'm unsatisfied</h1>
      </td>
      <td>
        <h1>I'm satisfied</h1>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">

        <div class="inner" style="width:100%; max-width:600px;">

        </div>

      </td>
    </tr>
  </tbody>
</table>