Joomla! Template ET Solar - Item Support

Hello

Thanks for template. Nice.

However, i am having trouble when trying to change the layout of the Home page. In particular i need help with the 'Features' section of the quix home page. I would like to add a 4th column. However when i do this within the quix editor the result is not correct. (you can see it on www.test21.1worldsolar.co.uk) there is no background colour, the column is not inline, the image is not centre aligned.

So used the code inspector within firefox and saw that it appeared to be taking styling from the default.css: line.255. Below is the edited version that i made

/***** Feature****/
#et-feature {
position: relative;
top:-120px;
z-index: 999;
cursor: pointer;
}
.et-feature-item {
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et-feature-item-1 img,
.et-feature-item-2 img,
.et-feature-item-3 img,
.et-feature-item-4 img {
left: 0;
right: 0;
margin: auto;
}
.et-feature-item-1 {
width: 24%;
margin-right: 1%;
background: #94C338;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
padding: 30px 30px;
}
body.itemid-546 .et-feature-item-1,
body.itemid-546 .et-feature-item-2,
body.itemid-546 .et-feature-item-3,
body.itemid-546 .et-feature-item-4 {
z-index:-1!important;
}
.et-feature-item-1 .qx-btn,
.et-feature-item-2 .qx-btn,
.et-feature-item-3 .qx-btn,
.et-feature-item-4 .qx-btn {
background-color: none!important;
border: none!important;
}
.et-feature-item-2 {
width: 24%;
margin-right: 1%;
background: #2BAC66;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
padding: 30px 30px;
}
.et-feature-item-3 {
width: 24%;
background: #008C7F;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
padding: 30px 30px;
}
.et-feature-item-4 {
width: 24%;
background: #008C7F;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
padding: 30px 30px;
}
.et-feature-item h3 {
font-size: 20px;
line-height: 22px;
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 20px;
color: #1f1f1f;
font-weight: 700;
}
#et-feature .et-button {
padding: 15px 35px;
background: none;
color: #7b7b7b;
border-radius: 50px;
border: 1px solid #eeeeee;
height: 50px;
letter-spacing: 0px;
}
#et-feature .et-button:hover {
color: #ffffff!important;
}
.et-feature-item {
padding: 10px 10px 0 10px;
transition: all .15s ease-in-out;
}
.et-feature-item:hover {
cursor: pointer;
padding: 20px 20px 0 20px;
}
.et-feature-sub {
position: relative;
cursor: pointer;
}

**************************

However this still has not helped. I can still only fit 3 columns inline, still no background colour and image not centred.

What have i missed? Where else do i need to look?

Thanks,
Andy

https://imgur.com/a/HCmQmsU