I have been searching through various websites, but I cannot find a solution to the specific issue I am facing. I am attempting to create a web page with a table aligned to the left side while keeping the rest centered. However, when I align items in the center, they are being pushed over to the right by the left-aligned table. How can I ensure that content aligned in the center remains unaffected by elements on the left side of the page? Below is my code.
`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
<table style="float: left" bgcolor="#9999FF" border="solid">
<tr>
<th><ul><h1>Directory.</h1></ul></th></tr>
<br>
<tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
<tr><td><li><a href="subpages/experience.html">Experience.</li></td>
</tr>
<tr><td><li><a href="subpages/References">References.</li></td></tr>
<tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
</td></tr>
<tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
</table>
<center>
<table bgcolor="CCCCCC" border="3px solid black">
<tr>
<th><h1><b><u>Name/Header.</u></b></h1></th>
</tr>
</table>
<img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" width="50%" border="solid">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject
</td>
</tr>
</center>
<style type="text/css">
h1{
color: #0404B4
}
th{
color: #61380B
}
td{
color: #8A0829
}
</style>
</body>`