Андрей Б.

Вырежи верхнюю часть, где у тебя кирпичный фон картинкой, уголок карты не вырезай, пусть будет прозрачным и наложи на карту через псевдоэлемент.

Можно еще на flexbox. Пример Уменьшите до 768px

Ну так и используйте для выходного CSS файла.
https://www.npmjs.com/package/gulp-csscomb/
https://npmjs.org/package/gulp-csscomb-lint/

У вас структура не правильная. Сделайте так awesomescreenshot.com/05b4rc4c4b

<header class="header"></header>
<div class="container">
	<section class="content"></section>
	<aside class="sidebar"></aside>
</div>
<footer class="footer"></footer>

эх, уже ответили) я тогда кину пример jsfiddle.net/6ju77p84, верхнему слою прописываете pointer-events: none; и тогда он перестанет реагировать на события.

jsfiddle.net/ntk7kvbp/5

UPD:
Взглянул на свой вариант и подумал, можно ведь обойтись одним псевдоэлементом.
И получилось следующее: jsfiddle.net/ntk7kvbp/12 в хроме немного ухудшается качество, видны "лесенки". В других браузерах получше.

Возникла еще идея, если потребуется удлинить пустую середину. Можно элементу задать overflow: hidden; а его псевдоэлементу отрицательный bootom отступ. Регулируя border-top и bottom можно добиваться нужного угла и ширины центра.
В общем вот пример - jsfiddle.net/ntk7kvbp/11

Ну и последнее, автоширина, в первом варианте размеры указанны жестко и если увеличить ширину контейнера то псевдоэлемент останется на месте.
Можно сделать так - jsfiddle.net/ntk7kvbp/10, конечно хотелось бы, чтобы тянулся сам бордер, но к сожалению этого эффекта не добиться, ну хоть так ).

Не сказать что красивое решение, но работает.

Вот так

<div class="box">
    <label for="" style="width: 100px;">Label</label>
    <input type="text" value="input">
</div>
<div class="box">
    <label for="" style="width: 60px;">Label</label>
    <input type="text" value="input">
</div>

.box {
    width: 500px;
    margin-bottom: 10px;
    display: table;
}
label,
input{
    display: table-cell;
}
input {
    width: 100%;
    margin-left: 10px;
}
label {
    background-color: #ccc;
}