I'm having problem aligning my list element, with a list tag inside of it.

Can some one please tell me why are my (class="productselection") are misaligned ?

The code

Grainberry

<header> <img class="logo" src="images/logo.png" alt="HTML5 Icon" width="200" heigth="200"> </div> <nav> <ul> <li><a href="portfolio.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="product.html">Product</a></li> <li><a href="eatingplans.html">Eating Plans</a></li> <li><a href="mediacenter.html">Media Center</a></li> <li><a href="store.html">Store</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header> <section> <div class="wrapper"> <h1 id="caption">ANTIOXDANTS<h1> <p> We grow our own high antioxidant grain in the spring and harvest it late summer or early fall. We mill the Grain Berry® high antioxidant grain and add it to our whole grain wheat, in the case of our delicious Bran Flakes or Pancake Mix and Muffin Mix. We add the Grain Berry® Bran to our whole grain delicious oats in the case of our Toasted Oats cereal and Honey Nut and Apple Cinnamon varieties. Why do we grow high tannin Grain Berry® grain? Because we cannot buy it and it's the best way we know to boost the natural antioxidant content of our products more than any other grain or any otherfruit or vegetable. </p> </div> </section> <div id="productframe"> <ul> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> </ul> </div> </section> <footer> <p>&Copy; 2014 Cordarro Gordon</p> </footer>

CSS

*{ padding:0px; margin:0px; } @font-face { font-family:Rockwell; src:url("Rockwell"); }

p { color:white; font-family:Rockwell; font-size:14px; font-weight: normal; }

h1{ color:white; font-family:Rockwell; font-weight: 200; font-size:60px; font-kerning:10px; }

h3{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; }

h3{ color:#666666; font-family:Rockwell; font-weight: 100; font-size:20px; }

header{ background-color:white; height:150px; }

img.logo{ display:block; margin-left:auto; margin-right:auto; margin-bottom:30px; position:relative; top:20px; padding-bottom:30px; }

nav{ background-color:#b00539; width:100%; height:80px; display:block; }

ul{ display:block; text-align:center; margin-top:-20px;

}

li,a{ text-decoration:none; color:white; font-family:Verdana; display:inline; padding-left:20px; font-size:15px; text-align:center; position: relative; top:12px; }

footer{ background-color:yellow; display:block; margin-top:200px; }

section{ width:100%; height:560px; margin-top:70px; background-image:url(../Images/Wrapper_background.jpg) } .wrapper{ width:50%; margin-left:auto; margin-right:auto; position:relative; top:70px; }

h1,caption{ text-align: center; padding-top:30px;

} .wrapper p{ line-height: 200%; position:relative; } productframe{

width:100%; height:338px; background-color:none; margin-top:20px; } .productselection{ background-color:none; width:25%; height:338px; display:inline; float:left; }

.productselection:hover { background: rgba(0,0,0,0); color: #e1c408; box-shadow: inset 0 0 0 3px #e1c408; }

.newicon{ margin-left:auto; margin-right:auto; display:block; position:relative; top:-18px; padding-top:5px; } p viewbnt{ margin-left: auto; margin-right: auto; }

.viewbnt{ background:#82ca9c; width:30%; height:36px; margin: auto; position: relative; top:-15px; border-radius: 5px 5px 5px 5px; } h4,view{ position: relative; top:7px; color:white; }

h3,category{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; position: relative; top:-25px; }