Avoid overlaping

Hey,

i have a problem. If i scale the browser on full size - a template will overlap with another.
If i resize it a little bit smaller - it works.
How can i avoid this problem generally?

Not fullsize:

Fullsize:
3

The template of the "Trash calendar/reminder":

<div style="margin-top: 8px" id="my_trashcalendar">
<table style="border-collapse: collapse; width: 100%;" border="0">
<tbody>
<tr>
<td >  
  <center><font color="{{msg.payload[0].color}}"><i class="fa {{msg.payload[0].icon}} fa-3x"></i></font>
  <center><br>{{msg.payload[0].daysLeft}} Tage</br></td>
<td >  
  <center><font color="{{msg.payload[1].color}}"><i class="fa {{msg.payload[1].icon}} fa-3x"></i></font>
  <center><br>{{msg.payload[1].daysLeft}} Tage</br></td>
<td > 
  <center><font color="{{msg.payload[2].color}}"><i class="fa {{msg.payload[2].icon}} fa-3x"></i></font>
  <center><br>{{msg.payload[2].daysLeft}} Tage</br></td>
</tr>
</tbody>
</table>
</div>

I wish you all a great sunday!

Best regards,
WernerM96

You are going to have to learn css, it is a learning curve but worth it.

https://www.w3schools.com/css/

note - the tags center font are deprecated, and br does not have a closing tag