How to make a hrefs in nav span the entire div - html

Question

I am trying to make my nav span the entire div, I want their background colour/target to have a width of 33%
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
#nav1 {
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
}
#nav2 {
background-color: #c73d00;
color: white;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
text-decoration: none;
}

Answer 1

There are a couple things wrong with your setup (for example: you have multiple ids, which is a no-no, so I've changed them to classes).
I've also gone through and tried remove some repetitious styling. So you'll see that a lot of the button styles have been condensed into one #nav a style, then the custom colours have been applied in separate styles.
I've set the font-size property in #nav to 12px, but that was only for demonstration purposes. Please edit this to your liking.
This fiddle should help:
Fiddle:
http://jsfiddle.net/fACmM/
HTML:
<div id="nav">
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</div>
CSS:
#nav
{
width:100%;
font-size:12px;
}
#nav a
{
width:33%;
float: left;
color: white;
padding: 10px 0px;
font-size: 1.3em;
text-decoration: none;
text-align:center;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}

Answer 2

Added display:block to your CSS.
See fiddle: http://jsfiddle.net/djwave28/audAt/6/
<nav>
<ul>
<li>Home
</li>
<li>Lesson 1: Intro
</li>
<li>Lesson 2: Creating a Project
</li>
</ul>
</nav>
nav ul {
list-style:none;
}
nav ul li {
float:left;
width:30%;
}
#nav1 {
position:relative: float:left;
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
display:block;
}
#nav2 {
display:block;
position:relative: float:left;
background-color: #c73d00;
color: white;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
text-decoration: none;
}

Answer 3

use class instead of id by the way this article help you understand why you used class instead of id with your current code
html
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
css
nav {width:960px}
nav a {
float:left;
text-decoration: none;
padding: 10px 50px 10px 50px;
font-size: 1.3em;
color: white;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}
working demo
hope this help you