i recently added some html code in code blocks to one of my pages everything was looking perfect for a while but then a week or 2 later in the preview mode of my site the whole page became messes up and the charts would be scrambled i linked some pictures of how it looks in edit mode (supposed to look) and how it looks in preview mode. below is one of my chart code and if anyone has any knowledge let me know if you can find a mistake of possibly a solution.
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 3px;
}
tr:nth-child(even) {
background-color: #AC8A38;
}
</style>
</head>
<body>
<h2>Gold Payouts</h2>
<table>
<tr>
<th>Amount of Pure Gold
<th>Karat gold >5% Purity</th>
</tr>
<tr>
<td>1g-30g</td>
<td>90%</td>
</tr>
<tr>
<td>30g-75g</td>
<td>91%</td>
</tr>
<tr>
<td>75g-200g</td>
<td>92%</td>
</tr>
<tr>
<td>200g-500g</td>
<td>93.5%</td>
</tr>
<tr>
<td>500g+</td>
<td>95%</td>
</tr>