I've tried many different approaches, but I'm struggling to figure it out. In my code below, the h1 and h2 elements have a gold and black background respectively. Although I've set their width to 500px, they are stuck at the top left corner of the page. Even with text-align: center, I can't get them to move to the center.
h1, h2 {
width:500px;
text-align: center;
}
h1 {
background-color: goldenrod;
margin: 5px;
}
h2 {
margin: 5px;
color: goldenrod;
background-color: black;
}
.content-table {
font-family: Helvetica;
border-collapse:collapse;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
box-shadow: -5px 5px 14px black;
margin: auto;
}
.content-table thead tr {
background-color: goldenrod;
font-size: 1.5em;
color: black;
text-align: left;
font-weight: bold;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=10">
<title>HTML Table Reference Cheat Sheet</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>HTML Table Reference</h1>
<h2>Table Tags</h2>
<table class="content-table">
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">&lttable></span></td>
<td>Table</td>
<td>The wrapper element for all HTML tables.</td>
</tr>
<tr>
<td><span class="code"><head></span></td>
<td>Table Head</td>
<td>The set of rows defining the column headers in a table.</td>
</tr>
<tr>
<td><span class="code"><body></span></td>
<td>Table Body</td>
<td>The set of rows containing actual table data.</td>
</tr>
<tr>
<td><span class="code"><tr></span></td>
<td>Table Row</td>
<td>The table row container.</td>
</tr>
<tr>
<td><span class="code"><td></span></td>
<td>Table Data</td>
<td>The table data container.</td>
</tr>
<tr>
<td><span class="code"><foot></span></td>
<td>Table Foot</td>
<td>The set of rows defining the footer in a table.</td>
</tr>
</tbody>
</table>
</body>
</html>