How to remove whitespace on a nav bar - html

Question

Here's a screenshot of the issue I'm having:
I cannot for the life of me figure out how to remove the empty space on either side of the navbar. I've tried making the margin and padding 0 but it hasn't been working. Any help would be appreciated.
Here is the html:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>

Answer 1

Add display: inline-block; to your nav ul selector and that will remove the whitespace from the sides.
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
display: inline-block;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>

Answer 2

You're maxing out the width at 1000px:
#wrap{
width:1000px;
}
The nav is within that, so it can't stretch wider than that.

Answer 3

As is noted by others, you're setting the width to 1000px;
Change#wrap{width: 1000px} to #wrap{width: 100%}