Hello,

I want to have my unordered list flush to the left side of my div box. I tried setting padding-left and margin-left to 0 px but it didn't work. Any suggestions.

#ourproducts {
    position:absolute;
    left:20px;
    top:686px;
    width:260px;
    height:350px;
    z-index:11;
    visibility: visible;

.prodheader li
{
    list-style-type: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.subprod li {
    list-style: inherit;
    font-weight: normal;
    list-style-image: url(../cssimg/liststyle.jpg);
    font-size: 14px;
}
.subprod li a {
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
}
.viewmore li {
    list-style: none;
    font-weight: normal;
    padding-left: 10px;
}
.viewmore li a {
    color: #00FF00;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
}



<div id="ourproducts">
<ul class="prodheader">
<span class="headergreen">Our Products</span>
    <li>Home Purchase</li>
        <ul class="subprod style7">
          <li><a href="#">JUMBO</a></li>
            <li><a href="#">Fixed / ARM</a></li>
            <li><a href="#">Adjustable ARM</a></li>
            <li><a href="#">Stated Income</a></li>
            <li><a href="#">Interest Only</a></li>
                <ul class="viewmore">
                    <li><a href="#">View More....</a></li>
                </ul>
        </ul>
    <li>Refinance</li>
        <ul class="subprod">
          <li><a href="#">Cash Out Refinance</a></li>
            <li><a href="#">Debt Consolidation</a></li>
            <li><a href="#">Fixed / ARM</a></li>
                            <ul class="viewmore">
                    <li><a href="#">View More....</a></li>
                </ul>
        </ul>
     <li>Home Equity Loan</li>
        <ul class="subprod">
          <li><a href="#">HELOC - Line of Credit</a></li>
            <li><a href="#">Home Equity Loan</a></li>
            <li><a href="#">High LTV's</a></li>
                            <ul class="viewmore">
                    <li><a href="#">View More....</a></li>
                </ul>
        </ul>
</ul>  
</div>

That's because you're using position: absolute. You can't change margins when you do that. You can either use position: absolute left; or take position: absolute out and change margins.