'Unable to stretch HTML footer to the full width

I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop. It should come like this: enter image description here

Its coming like this: enter image description here

My HTML code:

<!--Footer-->
                  <table class="footer">
                    <tr>
                      <td style="padding: 50px;background-color: #f7f7f7">
                        <table width="100%">
                          <p style="text-align: center; font-size: 12px; line-height: 1.5;">
                            Having Trouble with something?
                            <br>
                            Reach out to us <a href="#">[email protected]</a>
                            </p>
                            <img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
                        </table>
                      </td>
                    </tr>
                  </table>

My CSS code:

.footer{
        align-content: center;
        width: max-content;
        position: relative;
      }

Thank You in advance

htmlcsshtml-tableflexbox


Solution 1:[1]

Change the width: max-content; to width: 100%; and it should work. You can read more about how "max-content" works here

Solution 2:[2]

Use width: 100% for the table.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lluís Muñoz
Solution 2

Related Questions