モバイルの広告320×100の表示

最近、どれか忘れたんですけれどもこの返答の内容のようなことをそのトピックに返信した覚えがあるんですが、これは発想の転換で回避できます。

#mainの左右にpaddingを入れるからはみ出るわけで、入れなければよいのです。

#main {
  padding: 20px 0;
}

こうすると、幅いっぱいまで使えるようになります。

次に、本来のpaddingが必要な部分に何かしらのマージンなりpaddingを入れます。
デベロッパーツールが使えるなら、以下のページで確かめてみて下さい。
テストページ: Simplicityの基本的な文章装飾スタイルを使う方法まとめ

#main {
  padding: 20px 0;
}
#breadcrumb {
  margin-left: 29px;
}
#the-content {
  padding: 0 29px;
}
#sns-group {
  margin: 0 29px;
}
#widget-under-sns-buttons {
  margin: 0 29px;
}
.related-entry:nth-of-type(2) {
  margin: 0 29px;
}
.navigation {
  padding: 0 29px;
}
#comment-area {
  margin: 0 29px;
}

こんな感じでしょうか。このように、marginなり、paddingなりが適用されていない部分は#mainの幅いっぱいまで利用できていることがわかると思います。
関連記事の2つ目のアイテムなど、このようにすれば、質問の内容の場合、ボーダーさえ#mainに入っていなければ広告は左右のpaddingを無くせば入るんじゃなかろうかと思います。

ご回答ありがとうございます。上記の方法でいけそうです。ありがとうございました。

.ad-space {
    margin-left: -10px;
    margin-right: -10px;
}

とすることでうまくいきました。