how to modify the width of Homepage Boxes

Hello,

I want to customize a bit the theme: I want to have only 3 boxes, so I would like to redimensionate them. How can I do this?
I tried to modify the width of “Featued Box” in CSS but it didn’t have any effect

/* ============= Featured Box ============== */
.feature-box-main{ padding:0; z-index:999999; position:relative; }
.all-box{position:relative; top:-155px; margin-bottom:-155px;}

.feature-box{ <strong>width:30.85%</strong>; margin:0 1px 0 1px; padding:35px 10px; float:left; background-color:#2194fb; text-align:center; color:#ffffff; cursor:pointer; min-height:270px;}
.feature-box img{margin-bottom:25px; width:270px; height:190px; border:1px solid; border-color:transparent;}
.feature-box:hover{background-color:#393939;}
.feature-box:hover img{border:1px solid #FFF;}
.feature-box .feature-title{ margin:0 0 25px 0; text-transform:uppercase; font:700 28px 'Roboto',san-serif; color:#ffffff;}
.feature-box .feature-content{ line-height:20px; margin-bottom:40px; text-align:left; padding: 0 15px 0 34px;}
.feature-box a{ color:#0ec7ab; font:12px arial;}
.read-btn{color:#ffffff !important; padding:8px 14px 8px 14px; text-align:center; border:1px solid #FFF; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
.feature-box:hover .read-btn{background-color:#ffffff; color:#3a3c41 !important;}
.iconset{height:auto !important; width:auto !important; border:none !important;}