What is this extra box in my nav bar in html - html

Question

Here is my code below. I have this extra space in my navbar, not sure why it's there. I want only 3 boxes. Maybe, I am making this code more difficult than it should be my mistake. (I am just learning HTML ...)
/* Navigation bar */
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>

Answer 1

You should update this css part, if you need a width please assign.
.nav ul {
display:table;
}
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
display:table;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
/* width: 130px; */
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>

Answer 2

.nav a here ((130px + 20px)*3) Is not equal to 510px. try to assign the correct measurements
The following code will work
.nav {
width: 510px;/*Remove this line*/
...
display: table;/*<<<<<<<<Assign the required width*/
}
or
.nav ul {
...
display: table;/*<<<<<<<<Assign the required width*/
}

Answer 3

You can use Flexbox here. And for boxes you can use calc() here.
Stack Snippet
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
display: flex;
}
.nav li {
flex: 0 0 calc(100%/3);
}
.nav a {
display: block;
color: black;
text-align: center;
padding: 20px 10px 20px 10px;
font-size: 25px;
text-decoration: none;
box-sizing: border-box;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>

Answer 4

You should add display: table on the .nav class!
This should be your final code:
/* Navigation bar */
.nav {
/*width: 510px;*/
margin: auto;
list-style: none;
display: table;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>

Answer 5

Set your .nav width to 450px, which is the sum of your li elements
/* Navigation bar */
.nav {
width: 450px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>