Same Code Looks Different on Different Theme Versions

[BentonsBacon]

Hey all, I've got an odd problem. I'm working on a theme update, and I'm using a custom liquid block that contains some code I wrote myself. On my current theme, it looks fine. When I move it to the new theme, it looks messed up. It's weird since it's the exact same code, and it's just basic, universal stuff like CSS and HTML.

I'm working on the new theme, trying to tweak the code on the new theme to make it look right but haven't been able to correct it yet. I figured I'd get a second opinion.

I've attached a couple screenshots showing what they're supposed to look like, what they look like on the new theme instance, and the code itself.

Thanks for any input!

          <style>
            .container {

                max-width: 1400px;

                }

                .trustbadges {
                  background-color: #F6F5F2;
                  border: 0px solid black;
                  border-color: #6F95C0;
                  color: #363636;
                  text-align: left;
                  text-decoration: none;
                  font-family: "Open Sans", sans-serif;
                  display: inline-block;
                  font-size: 15px;
                  margin: 2px 2px;
                  cursor: arrow;
                  padding: 10px 20px;
                  border-radius: 5px;
                  height: 70px;
                  width: 325px;
                }

               .trustbadges a:link, .trustbadges a:visited {
                  color: #6f95c0;
                  text-decoration: none;
                }
            
              .trustbadges a:hover, .trustbadges a:active {
                  color: #5a85b7;
                  text-decoration: none;
                }
            
            @media(min-width:700px) and (max-width:1400px){
              .container{
                display: grid;
                grid-template-columns: 1fr 1fr;
              }
              .container .trustbadges:nth-child(odd){
                justify-self: end;
              }
            }
          </style>

          <center>
            <div class="container">
              <div class="trustbadges">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <img
                          src="/files/Free-Shipping-W.png?v=1659009728"
                          height="42"
                          width="72"
                        >
                      </td>
                      <td>
                        Free
                        <a href="/pages/policies#shipping" target="_blank">Shipping</a> on
                        orders<br>
                        over $99 (contiguous USA)
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="trustbadges">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <img
                          src="/files/1/1025/8957/files/Quality-Guaranteed-W.png?v=1659009728"
                          height="42"
                          width="72"
                        >
                      </td>
                      <td>
                        Top Quality
                        <a href="/pages/our-guarantee" target="_blank">Guarantee</a>,<br>
                        and Zero Risk Returns
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="trustbadges">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <img
                          src="/files/1/1025/8957/files/Customer-Service-W.png?v=1659009727"
                          height="42"
                          width="72"
                        >
                      </td>
                      <td>
                        Excellent Customer Service<br>
                        <a href="/pages/contact" target="_blank">Contact Us</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="trustbadges">
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <img
                          src="/files/1/1025/8957/files/Secure-Payments-W.png?v=1659009728"
                          height="42"
                          width="72"
                        >
                      </td>
                      <td>
                        Pay your way & save with<br>
                        flexible
                        <a href="/pages/policies#payment" target="_blank"
                          >payment options</a
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </center>

[elevendev]

did you find any solution to this?