I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the box. Can anyone offer assistance on how to make the table look like this:
header {
text-align: center;
font-size: 30px;
font-style: bold;
font-style: italic;
}
#column-1 {
float: left;
background-color: lightblue;
width: 25%;
border: 5px solid red;
padding: 20px;
margin: 2px;
height: 400px
}
#column-2 {
background-color: lightblue;
width: 100%;
border: 5px solid red;
padding: 20px;
margin: 2px;
text-align: center;
height: 400px<!DOCTYPE html>
<html>
<head>
<title>Logans Dinner</title>
</head>
<body>
<header>Welcome to Logans Dinner</header>
<div id='column-1'>
<nav>
<ul>
<li><a href='/Menu.html'>Menu</a></li>
<li><a href='/About.html'>About Us</a></li>
<li><a href='/Contact.html'>Contact Us</a></li>
</ul>
</nav>
</header>
</div>
<div id='column-2'>
<section>
<p>Our Menu</p>
<table>
<thead>
<tr>
<th>Food</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Burger</td>
<td>1/2 lb Angus Beef</td>
<td>$10.99</td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>