Twenty Eleven — объединение заголовка и лого

Если читать Ваши слова и пытаться понять их, то выходит, что все сделано именно так как Вам надо.
Почему я так считаю? Процитирую Вас:
… лого (сама картинка) находится ниже заголовка…
… чтобы лого было под заголовком…

Если Вы все же желали заголовок под картинкой, тогда надо сделать так:

1. Элемент <hgroup> и все его содержимое, т.е. строки 73-76 шаблона header.php, переместить под закрывающий </a> в строке 112.
2. В строке 626 файла style.css, т.е. в селекторе #branding #searchform изменить значение свойства top: 3.8em; на top: 22.8em;

Ясно. Тогда, если упростить процесс, стоит поступить так:

1. В style.css добавить следующее:

   #branding > a {
       position: absolute;
       top: 0px;
       z-index: -1;
   }

2. В style.css в строке 541, т.е. в селекторе #access изменить margin: 0 auto 6px; на margin: 120px auto 6px;
3. В style.css в строку 626, в селектор #branding #searchform дописать background: white;

Вот тут готовый файл style.css, замените им существующий у Вас.

Все это здорово до момента изменения размера ширины окна браузера, однако, немного «поколдовав» дополнительно, можно поправить и этот момент.

Да, спасибо, wikicms, я давно хотел попробовать, вот и повод.

Предлагаю готовое решение с решением масштабирования и использованием дочерней темы, в архиве папка содержащая необходимое.