iBird Rose

background просвечивает. покрась его тоже в серый

никогда. в html не должно быть стилей. никаких.
исключение только если через скрипты какой нить display:block; или none вешаете на блок или подобное

если между h3 всегда p то так:

$('h3').siblings('p').wrap('<div class="content"></div>');

UPD:

$('h3').nextUntil('h3').wrap('<div class="content"></div>');

UPD2:
вот так кароче)

$('h3').each(function() {
    	$(this).nextUntil('h3').wrapAll('<div class="content"></div>');
  });

https://jsfiddle.net/duc68fmL/6/

самому попа задавай фиксированную высоту. а колонкам процентную.

1) задний блок - обычный белый фон и черный border.
2) london отдельным блоком display: inline-block и черный фон
3) делаешь для london :after и делаешь черный треугольник через border (https://habrahabr.ru/post/126207/)
как то так: https://jsfiddle.net/qh4sd2bq/

не думаю что это правильно, но когда столкнулся впервые с такой же проблемой - перепробовал разное. и остановился на absolute, потому что его легче всего делать и адаптировать.
тобишь делается 2 блока с бг через absolute с фикс высотой. а container уже через relative и больший z-index располагается спереди.

var block1 = $('.block1').width(); //блок 1
var block2 = $('.block2').width(); //блок 2
var wrapper = $('.wrapper').width(); //100%

block3 = wrapper - block1 - block2;
$('.block3').css('width', block3);

p.s. а вообще советую такое проделывать через css calc

getbootstrap.com/customize/#grid-system
меняешь @grid-float-breakpoint на @screen-md-min

фон просвечивает. ему тоже сделай background: blue;