Контент на всю ширину экрана в адаптивной версии

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

@media only screen and (max-width : 992px) {
#sidebar {
    display: none;
}
#wrapper {
     width: 98%;
}
#content {
float: none;
  width: 100%;
}
}

...понять как работает адаптивность на моем сайте.

Их нет там :)

Почитайте.

Варианта три:

• оставить только width=device-width,
• переделывать верстку,
• мобильный вариант сайта.

UPD: ответ на комментарий

В верстке Вашего сайта основные элементы интерфейса "прибиты" намертво, то есть шаблон для сайта создавался для определенного мин. разрешения экрана по горизонтали (у "пациента" 980 или 1000px).

И при включении initial-scale=1 (см. ссылку), часть содержимого выходит за пределы экрана (меньшего 1000px), появляется горизонтальный скролл.

"Другие" сайты избегают этого более сложной логикой верстки основанной, в том числе на процентном соотношении размеров элементов к размеру экрана.

Принимаемые выше меры недостаточны для появления "адаптации для просмотра на разных устройствах" (c). Соответственно, смотрите варианты выше (забыл и добавил про мобильный вариант).

Почитаете, на хабре есть отличная статья. Я все сайты делаю по этому принципу,

Итак, отвечаю сам на свой вопрос. Я перелопатил весь код и в одном из файлов нашел ужасающий момент...

    html {
    min-width: 1000px;
}

Получается вся проблема была в том, что это правило тянуло сайт до 1000 пикселей, независимо от моих желаний. Хотя я и пытался выставить обнуление ширины для всех элементов.

Сейчас все стало отлично. Поправить пару моментов и будет лайт-пример мобильной версии. Всем спасибо за внимание, читайте свой код! =)