Просто добавь стиль после бутстраповских:

#main_header > .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

Чтобы иконка меню смотрелась как надо:

h2.pull-right.toggle {
    padding: 0px 15px;
    margin: 13px 0 12px;
}

Для фикса кнопки Publish your ad for free :

.head_btn .publish {
    float: right;
    padding-top: 0;
}

Для фиксации меню:

body.has-searchbox.home {
    padding-top: 45px;
}
#main_header {
    position: fixed;
    top: 0;
}

Кажется ничего не забыл)

На самом деле нет ничего трудного, задайте блоку-контейнеру position: flex; Дочерним элементам задайте соотношение, например левому и правому блоку flex: 4, а центральному flex: 1; (первый параметр задает свойство grow), потом по ситуации добавьте flex-wrap: wrap, если хотите чтобы ваши блоки шли в разметке "сплошняком" друг за другом и задайте им flex-basis, в зависимости от минимальной ширины контейнера, или оберните каждую строку в отдельный контейнер, а дочерние блоки порадуйте свойством justify-content: space-between;
А когда будет необходимо менять местами правый и левый блок, используйте чудесное свойство order.
Удачи)

Добавьте проверку имеющегося класса active и если он есть, то return false, иначе пускай отрабатывает код ajax запроса

Если начать копать, то при (x != true ) вернет true не только при x == false, а т.ж. если x == 0, x == undefined и т.д., а при сравнении с конкретно false, используя именно строгое сравнение === false, true вернется только если x === false, в остальных случаях надо экспериментировать)