В бутстрап-верстке последнию колонку выделить в блок

[mstdmstd]

Всем привет,
Подскажите, пожалуйста, есть бутстрап-верстка нескольких полей на маленьких и средних девайсах в 2 колонки:
jsfiddle.net


И хотелось бы выделить эти поля в 3 грппы с заголовком
Я попробовал последнию колонку заключить в див со стилями чтобы эту колонку как-то неброско и аккуратно выделить в блок:
 

 <div class="widgetcontent">
   <h4 class="widgettitle">Contact Details</h4>

   <div class="form-group col-xs-12 col-sm-6 col-md-6">
     <label for="phone" class="col-xs-12 col-sm-4 col-md-4">Phone</label>
     <div class="col-xs-12 col-sm-8 col-md-8">
       <input type="text" name="phone" id="phone" class="form-control " value="" size="16" maxlength="16" placeholder="Contact Phone" >
     </div>
   </div>

   <div class="form-group col-xs-12 col-sm-6 col-md-6">
     <label for="email" class="col-xs-12 col-sm-4 col-md-4">Email</label>
     <div class="col-xs-12 col-sm-8 col-md-8">
       <input type="text" name="email" id="email" class="form-control " value="" size="20" maxlength="50" placeholder="Hostel contact email address" >
     </div>
   </div>
 </div>

Но получилочь криво : я не понял почему красный фон выделил область выше этой последней колонки...
Как можно выделить эту последнюю колонку?

  Спасибо!
 

[Igor Schnaider]

Очистить float нужно.

[mstdmstd]

Спасибо с

clear: both;

в определении  h4.widgettitle  стало лучше https://jsfiddle.net/12cgbqn4/7/

А как сделать выделение блоками вроде http://i.imgur.com/gvwgWWi.png ?

[Igor Schnaider]

Так а что там? Просто делаете внешний блок, стилизуете его, как вам нужно.

Если хотите использовать готовые решения bootstrap, посмотрите здесь.

[mstdmstd]

Почти получилось 

Подскажите пожалуйста почему бордюр справа вылез и у меня не получается им управлять меняя     padding-right,    margin-right: 10px?

https://jsfiddle.net/12cgbqn4/9/

[klierik]

https://jsfiddle.net/12cgbqn4/14/ ?