I want the <div class="right"> to be styled like the <div class="left">, except on the opposite side of the page, but it isnt doing what i want it to do.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title></title>
</head>
<body>
<div id="header"><h1>Sponsor-a-Lesson!</h1></div>
<div class="left"></div>
<h2>For only $20, you can sponsor an ELA lesson in Mr. Daley's class!</h2>
<ul>
<li>Your business name will be put on the board-- right where students look!</li>
<li>You business will be mentioned positively 3 times per class period!*</li>
<li>For an extra $10, Mr. Daley will wear a shirt with your logo on it!</li>
<li>For an extra $5, you business logo will be drawn on Mr. Daley's bald head!</li>
<li>This is perfect for resturants, stores, and other local businesses that cater especially to teenagers!</li>
</ul>
<h2>About Mr. Daley's class</h2>
<p>Mr. Daley teaches 8th grade English Language Arts at Nessacus Regional Middle School,
which has students from Dalton, Hinsdale, and the Hilltowns, as well as some school choice students from Pittsfield.
He is considered to have a sense of humor, and came up with the idea for the 'Sponsor-a-Lesson' himself!</p>
<h4>*For $1 extra, you can have your business mentioned even more-- $1 per extra time.</h4>
<table>
<thead>
<th></th>
<th>Just a sponsoring</th>
<th>Add the T-Shirt</th>
<th>Add Mr. Daley's Head</th>
</thead>
<tr>
<td class="pricing">Just a sponsoring</td>
<td>$20</td>
<td>$30</td>
<td>$25</td>
</tr>
<tr>
<td class="pricing">Add the Shirt</td>
<td>$30</td>
<td>X</td>
<td>$35</td>
</tr>
<tr>
<td class="pricing">Add Mr. Daley's Head</td>
<td>$25</td>
<td>$35</td>
<td>X</td>
</tr>
</table>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
CSS:
body {
background-color:#F3E9D8;
}
#header {
margin-top:0px;
width:100%;
height:80px;
background-color:#80FF44;
border:#00AE44 5px solid;
border-radius:50px;
position:fixed;
z-index:1;
}
.left {
margin-top:100px;
width:80px;
height:800px;
background-color:#FF606E;
border:#CC2341 5px solid;
border-radius:50px;
float:left;
}
.right {
margin-top:100px;
width:80px;
height:800px;
background-color:#FF606E;
border:#CC2341 5px solid;
border-radius:50px;
float:right;
}
#footer {
width:100%;
height:80px;
background-color:#00A1FF;
border:#0026FF 5px solid;
border-radius:50px;
clear:both;
}
h1 {
font-family:"Tauri";
text-align:center;
font-size:60px;
margin-top:0px;
}
h2 {
font-family:"Tauri";
text-align:center;
padding-top:100px;
}
ul {
font-family:"Tauri";
text-align:center;
list-style-type:none;
}
p {
font-family:"Tauri";
padding-left:100px;
padding-right:100px;
text-align:center;
font-size:16px;
}
h4 {
font-family:"Tauri";
padding-left:100px;
padding-right:100px;
text-align:center;
}
table {
margin-left:120px;
margin-right:120px;
font-family:"Tauri";
padding-left:140px;
padding-right:140px;
text-align:center;
border:2px solid black;
border-radius:10px;
}
th {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px solid black;
border-radius:10px;
}
.pricing {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px solid black;
border-radius:10px;
}
td {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px dashed black;
border-radius:10px;
}
Screenshot:
Before you post, read our: 
Divs not doing what I want them to do!
