Unwanted space on left side of div - html

Question

There is an unwanted gap between the left side of my div and the actual content inside of it (text, images). I have margin and padding both set to 0px for the class. The div is also right next to my nav bar, which may be somehow affecting the spacing.
body
{
background-color: #f5f5f7;
background-image: url("../img/powder.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
font-family: 'Lora', serif;
padding: 0px;
}
.main /* the extra space is occuring in this class */
{
position: relative;
left: 200px;
width: 800px;
height: 400px;
text-align: left;
border-radius: 10px;
padding-left: 0px;
margin: 0px;
background-color: rgba(207, 207, 207, 0.5);
}
nav ul
{
background: #efefef;
background: linear-gradient(to right, #d3c965 0%, #89822a 100%);
background: -moz-linear-gradient(left, #d3c965 0%, #89822a 100%);
background: -webkit-linear-gradient(left, #d3c965 0%,#89822a 100%);
background: -o-linear-gradient(left, #d3c965 0%, #89822a 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0px 20px;
border-radius: 10px;
list-style: none;
/* display: inline-table;*/
margin: 0px;
}
nav ul li:hover
{
background: linear-gradient(to right, #993300, #4C1A00); /*Standard syntax */
background: -moz-linear-gradient(left, #993300, #4C1A00);/* For Firefox 3.6 to 15 */
background: -webkit-linear-gradient(left, #993300, #4C1A00);/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, #993300, #4C1A00); /* For Opera 11.1 to 12.0 */
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a
{
display: block;
padding: 25px 40px;
color: #4C4C4C;
text-decoration: none;
margin: 0px;
}
The live version of this is available at msu.edu/~bridsonc/henna

Answer 1

Make the div float like the menu.
.main {
float: left
/* change left:200px to margin-left:20px */
Maybe you could than add a padding-left of 10px

Answer 2

change the position of the div from relative to fixed:
.main /* the extra space is occuring in this class */
{
position: fixed;