ocean
когда надо что-то вынести за пределы окантовки, самый простой способ - position: absolute
но у тя проблемка в том, что и шапку тоже надо выносить, т.к. ты в нее засунула лого и место для верхней таблички.
еще проблема, что код тестовика насыщен ошибками, а окантовку такую над не картиночками делать, а кодом (она одноцветная).

давай разбираться поэтапно.

шаг 1. делаем окантовку "тела"

для такой окантовки вообще не нужны картинки

убирай ОБА кода (в них куча ошибок):

#pun {
    margin: auto;
    width: 940px;
    float: top center;
    padding: 50px 0px 0px 0px;
    margin-top: 240px;
}
#pun {
    width: 940px;
    background-color: transparent;
    background-image: url(https://forumstatic.ru/files/001a/f4/24/47322.jpg);
    background-attachment: scroll;
    background-repeat: repeat;
    background-position: top center;
}

вместо этого делаем код:

зеленое - цвет фона
синее - отступ от краев до черной окантовки "туловища"
красное - ширина (МИНУС ширина padding с обоих сторон)
фиолетовое - высота шапки + объявления + меню, кароче, всего, что мы вынесем ЗА пределы туловища сверху

удаляем это (опять два кода, которые противоречат друг другу):

.punbb {
    float: none;
    width: 94%;
    height: auto;
}

.punbb {
    padding: 0 30px !important;
    width: 940px;
}

вместо него вставляем:

красное - черная линия окантовки
синее - отступ текста от черной линии

и для подготовки к следующему этапу надо "почистить код"
удаляем шапку, которая вставлялась через margin:

удали сдвиг меню:

добавь в объявление такие штуки для создание двух табличек:

вместо "ссылка на картинку" вставь ТОЛЬКО пнг логотип (надпись вверху, БЕЗ линии и БЕЗ всего остального)

отпишешься, перейдем к позиционированию табличек и менюшек.