hi

i have a challenge and at this moment i don't know how to solve it..

this is the problem http://img818.imageshack.us/img818/6057/56451691.jpg

when i make it responsive and the screen goes smaller the item block goes on the second row. that's great. but it leave a big hole in it..

when i give the nav the same background then i don't have this problem. great!.. but because i have rounded corners of the li. you don't see it anymore because of the nav background.

some how the nav background should be at the end ...

<nav>
  <ul>
     <li>
         <a>
     </li>
  </ul>
</nav>


nav, li{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(80, 132, 185)), to(rgb(57, 110, 164)));

border-top-left-radius: 0.31em;
border-top-right-radius: 0.31em;
border-bottom-right-radius: 0.31em;
border-bottom-left-radius: 0.31em;

}
nav li a{
padding: 20px 1.75em ;
height: 15px ;
}