Pretor DH

Класс "clearfix" нужно добавить.

<section class="mild clearfix">

Препроцесоры только для удобства написаня кода. Никаких преймуществ для браузера они не предоставляют.

А будущий CSS4 даёт преимущества именно для браузера. Например:
- возможны существенные оптимизации рендеринга на стороне клиента;
- по сети будет передаваться меньший по размеру код...

С переходом на протокол HTTP2 держать файлы раздельно даже на сервере будет лучше. Не будет разницы, ибо пакетироваться они будут на уровне протокола.

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.
  

P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.

Можно вот jsfiddle.net!

По пунктам:
- вкладываеш блок с картинкой в релативный контейнер с overflow:hidden;
- выставляеш внутреннему блоку margin: 0 -10% и ширину 120%;
- Зкругливаеш внутренние углы ублока не пропорционально, указывая для каждого угла два значения 50% 100%. Регулируя эти значения добивашеся нужного. Если не получается увеличиваеш маргины и ширину во втором пункте, и делаеш значения закрегления угла ближе к 100% 100%.

codepen.io

Для блока содержащего подпункты
display: inline-block;
position: absolute;
top:0;
bottom:0;

Для блока содержащего пункты
position: absolute;

Блок содержащий подпункты должен быть следующим за пунктом.

JSfiddle
P.S. Использовать ul li для меню несколько неправильно. Когда-то был большой спор. И пришли к выводу, что семантичнее его не использовать. И не плодить лишние блоки, тег А всегда приходится вкладывать в LI. Но много людей остаются при своем мнении.

Вот статья про Bootstrap и 3 колонки одинаковой высоты.
Но лично мене не нравится такое решение.

Вот решение в 3 правила адаптивное по ширине и высоте .

<main>
    <div>
        <p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
</main>

main {
    position:relative;     /* должно быть отлично от static */
    overflow:hidden;
}
div {
    vertical-align:top;
    position:relative;
    display:inline-block;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
    content:'';
    position:absolute;
    left:0;right:0;
    bottom:-1000%;      /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
    top:0;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    background:gray;
}