I'm working on a header bar that will scale with the window. I have all of the images placed properly and all dimensions are correct. However, the "1" image is too short, but mathematically everything is correct and it should be flush. More importantly, when the window is scaled, strange gaps appear at random places and they jump around. How can I fix this so that all of the images stay flush against each other?

----Code Below----

`
<!-- SCALABLE HEADER 2 : BEGIN -->

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 680px;">

<tr>
    <td>

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 680px;">
  <tbody>
    <tr>


      <!-- LOGO TD : BEGIN -->
      <td style="max-width:230;">

       <img src="https://www.placehold.it/230x140/ff00ff/ffffff/?text=1" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

      </td>
      <!-- LOGO TD : END -->




      <!-- RIGHT SIDE TD : BEGIN -->
      <td style="max-width:450;">


      <!-- SOCIAL ROW : BEGIN -->
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td style="max-width:310;">

            <img src="https://www.placehold.it/310x60/00ffff/?text=2" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:40;">

            <img src="https://www.placehold.it/40x60/ff00ff/ffffff/?text=3" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:40;">

            <img src="https://www.placehold.it/40x60/00ffff/?text=4" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:60;">

            <img src="https://www.placehold.it/40x60/ff00ff/ffffff/?text=5" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
          </tr>
          </tbody>
          </table>
          <!-- SOCIAL ROW : END -->




          <!-- MENU ROW : BEGIN -->
          <table cellspacing="0" cellpadding="0" border="0">
           <tbody>
           <tr>
            <td style="max-width:120;">

            <img src="https://www.placehold.it/120x80/d9e021/?text=6" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:108">

            <img src="https://www.placehold.it/108x80/ff00ff/ffffff/?text=7" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:105;">

            <img src="https://www.placehold.it/105x80/d9e021/?text=8" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
            <td style="max-width:117;">

            <img src="https://www.placehold.it/117x80/8cc63f/ffffff/?text=9" alt="" width="100%" border="0" style="display:block; max-width: 100%; font-family: Trebuchet MS, sans-serif; font-size: 16px;text-transform: none; font-weight: normal; color: #ffffff; text-align: center;">

            </td>
          </tr>

        </tbody>
      </table>
      <!-- MENU ROW : END -->


      </td>
      <!-- RIGHT SIDE TD : END -->


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

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

<!-- SCALABLE HEADER 2 : END -->
`