How to center a navbar under a heading? - html

Question

I have a problem laying out and centering the navbar and the table. I want the navbar to be right under the h2 element and centered. At the moment, the navbar breaks onto the next line. The layout of the table is fine, but it should be centered. I wonder if there is a better technique for making a navbar.
Here is my code:
* {
background-color: #2c2f33;
text-decoration: none;
}
.bet-table {
display: table-cell;
margin: 0;
color: white;
}
.bet-table th,
td {
border: 1px solid;
text-align: center;
padding: 5px 5px 5px;
}
.bet-table table {
margin-left: auto;
margin-right: auto;
}
.logo {
text-align: center;
font-size: 40px;
font-family: arial;
font-weight: lighter;
color: white;
}
.nav-g ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-g li {
list-style: none;
display: inline-block;
}
.nav-g a {
text-decoration: none;
width: 100px;
display: block;
padding: 2px 2px 2px;
font-size: 15px;
font-weight: lighter;
text-align: center;
color: white;
font-family: arial;
float: left;
}
.Choose h3 {
color: white;
background-color: #7289da;
padding: 8px 8px 8px 8px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
margin-top: 5pc;
}
.navbar a:hover {
color: #7289da;
}
<div id="h-container">
<h2 class="logo">Betbowl
<h2>
<div class="nav-g">
<ul>
<li><a href="#">Make-A-Bet</li>
<li><a href="#">Pending</li>
<li><a href="#">Completed</li>
</ul>
</div>
</div>
<div class="Choose">
<h3>Choose</h3>
</div>
<div class="bet-table">
<table style="width:100%; margin-left: auto; margin-right: auto;">
<tr>
<th>Situation</th>
<th>Bet</th>
<th>Winner</th>
<th>Earnings</th>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>

Answer 1

First you need to close your <a> tags. like this:
I AM A LINK
ul needs to be centered:
text-align:center
for the table you should remove display property from the container, default value works fine:
.bet-table{
/* display: table-cell; REMOVE THIS LINE */
margin: 0;
color: white;
text-align: center;
width: 100%;
}
table{
margin: 0 auto
}
find the edited version here: https://codepen.io/theBehrouz/pen/QWmXZbr