html - Responsive divs toruble -

i new responsive design , i'm taking first shot @ blog making company. using media queries change width % , float of divs going serve blog articles. of queries working great except one...

@media screen , (min-width: 1196px)  , (max-width: 1667px) {  #blog1, #blog2, #blog3 ,#blog4, #blog5, #blog6, #blog7, #blog8, #blog9 ,#blog10, #blog11,            #blog12, #blog13, #blog14, #blog15 ,#blog16, #blog17, #blog18, #blog19, #blog20, #blog21,   #blog22, #blog23, #blog24, #blog25 ,#blog26, #blog27, #blog28, #blog29, #blog30, #blog31, #blog32, #blog33, #blog34, #blog35 ,#blog36, #blog37, #blog38, #blog39,#blog40, #blog41, #blog42, #blog43, #blog44, #blog45 ,#blog46, #blog47, #blog48, #blog49 { float:left; margin-left:2.5%; margin-right:2.5%; margin-top:2%; margin-bottom:2%; width:30%; } } 

i'm trying tell spread 3 blog posts across screen evenly. works when size of ipad (1024px-768px) , spreads 2 divs across screen evenly not work when ask same 3 divs. instead, pushes 3rd div next row. have tried different display: properties no avail.

you can view example here: www.highlandplanning.com/blog.html - need big screen see i'm talking about.

consider making margins or width smaller. margins it'll come 35% , 35% doesn't fit 100% 3 times.