div左侧的多余空间

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

change the position of the div from relative to fixed:

.main /* the extra space is occuring in this class */
{
    position: fixed;

Answer 2

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