A Digital Drama of Vanishing Icons

I have this following bit of code:

body {
            margin: 0;
            background-color: #cccccc;
        }

        table {
            border-spacing: 0;
        }

        td {
            padding: 0;
        }

        img {
            border: 0;
        }

        /* Wrapper */
        .wrapper {
            width: 100%;
            table-layout: fixed;
            background-color: #cccccc;
            padding-bottom: 60px;
        }

        /* Main Content */
        .main {
            background-color: black;
            margin: 0 auto;
            width: 100%;
            max-width: 600px;
            border-spacing: 0;
            font-family: Arial, Helvetica, sans-serif;
            color: #171a1b;
        }
        .two-columns {
    text-align: center;
    font-size: 0;
}

.two-columns .column {
    width: 50%; /* Set width to 50% to ensure both columns occupy equal space */
    display: inline-block;
    vertical-align: middle;
    width: 180px; /* Set width to match the width of the logo */
    display: inline-block;
    text-align: center; /* Center the content horizontally */
    max-width: 300px;

}

/* Additional CSS to ensure social media icons align vertically */
.two-columns .column:last-child {
    text-align: right; /* Align social media icons to the right */
    margin-top: -5px; /* Add margin to lift the social media icons up */

}

        /* Social Button */
        .btn:hover {
            color: white;
            opacity: .8;
            transform: scale(1.02);
        }

.image-cell {
    padding: 0;
}

.banner-container {
    text-align: center; /* Center content horizontally */
    margin-top: -60px; /* Adjust this value as needed to remove the space */
}

    </style>
</head>

<body>
    <center class="wrapper">
        <table class="main" width="100%">
            <!-- TOP BORDER -->
            <tr>
                <td height="8" style="background-color: white;"></td>
            </tr>

            <!-- LOGO SECTION -->
            <tr>
                <td>
                    <table width="100%">
                        <tr>
                            <td class="two-columns">
                                 
                                <table class="column">
                                    <tr>
                                        <td>
                                            <a href="https://dbo-events.co.il/%D7%94%D7%A9%D7%9B%D7%A8%D7%AA-%D7%%D7%99%D7%95%D7%93-%D7%9C%D7%90%D7%99%D7%A8%D7%95%D7%A2%D7%99%D7%9D-%D7A6%91%D7%A0%D7%AA%D7%A0%D7%99%D7%94/">
                                                <img src="Salford & Co..png" alt="luxury logo" width="180" title="luxury logo">
                                            </a>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td class="social-media" text-align: center;>
                                         
                                         <a href="#"><img src="1.png" alt="" width="30px"></a>
                                            <a href="#"><img src="2.png" alt="" width="30px"></a>
                                            <a href="#"><img src="3.png" alt="" width="30px"></a>
                                            <a href="#"><img src="4.png" alt="" width="30px"></a>
                                            <a href="#"><img src="linkedin.PNG" alt="" width="30px"></a>

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

                            </td>
                        </tr>

                        <tr>
                            <td style="background-color: white; padding: 10px 0;">
                                <table class="column" width="100%">
                                    <tr>
                          
                    </table>

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

Problem is, the social media icons aren’t showing on the page.
I wanted them to be on the black square, but they just vanished…

Can you point out where would you expect the social media icons and what code is that?

your code doesn’t allow for reproduction of the issue. Do you have maybe a github repo with your code and the images?

I wanted the social media icons to be on the logo section. The code is for an HTML email template.
I don’t have a github repo with the code and the images.

Is this how you want your images to be on your page?
The images should be working as long as the src link of the image is valid.

I want the social media icons to be in the top section, below the logo picture.
At the bottom there is only one picture for now.
The src is undoubtedly valid.