Update: By adding <div style="overflow-x: auto;">
above table it fixed the menu not fitting 100% on the page but the tables are still a little off but I adjusted it with changing the margins to auto and lowering the text size so it would all fit on the page and all seems well enough now. Do you see any foreseeable problem in the future doing it this way?
<style>
table, th, tr, td {
border: 1px solid black !important;
padding: 1px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 10px !important;
}
table {
border-spacing: 1px !important;
}
</style>
</head>
<body>
<div style="overflow-x: auto;">
<h1 style="text-align: center;">Echo Duck Calls Pro Staffing</h1>
<table>
<tbody>
<tr><th ><strong>Elite Pro Staff: (50% Discount)
</strong></td>