Home features 9-13 change to 9-12 only

Hi I am in the process of turning this area into a three block of widgets instead of four. It displays perfectly well locally, but when I try to reproduce it on the live site it does not display in the same way.

I applied the dimensions from the footer widgets this is the css

/* Home Feature 9 */

.home-feature-9 {
clear: both;
text-align: center;
}

.home-feature-9 .widget {
margin: 0 0 40px;
overflow: hidden;
}

.home-feature-9 h4 {
font-size: 32px;
font-weight: 400;
line-height: 38px;
}

/* Home Feature 10 */

.home-feature-10 {
float: left;
margin: 0 4.166666666% 0 0;
width: 30.555555555%;
}

.home-feature-10 .widget {
margin: 0 1.3% 0 0;
overflow: hidden;
}

/* Home Feature 11 */

.home-feature-11 {
float: left;
margin: 0 4.166666666% 0 0;
width: 30.555555555%;
}

.home-feature-11 .widget {
margin: 0 1.3% 0 0;
overflow: hidden;
}

/* Home Feature 12 */

.home-feature-12 {
float: right;
margin: 0;
width: 30.555555555%;
}

.home-feature-12 .widget {
margin: 0 ;
overflow: hidden;
}

I expect it is something to do with the margins? Can you give me an ice of what I am doing wrong.

The live site is behind a plugin that only displays for admins so I have taken some screen shots
local view

live view