I can't figure out my layout

I’ve been trying to create a patriotic CSS template. I took one I used before, Dark Ritual, and started modifying it using assets I’d found on the web, as well as colors, etc.

Here is what I’ve got so far.

The problem I am encountering is that I have an image being used in the main middle column (called .main in the CSS. It can be found [URL=“http://wspentertainment.com/patriot/img/light_blue.jpg”]here.

Unfortunately, the sections of the site under the navmenu and under the Related Links/Other Stuff column contrast to the middle column.

So then I tried to apply the same image in CSS to these sections. What I did was create a new XHTML document, create the container div just like in the example above, then laid each element into the container div just like in the example above. However, I put the navbar, main, and leftmenu (called main_right) into its own div, which I called content. I figured I could just make the background image of the content div be the aforemention background image.

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="navbar"></div>
    <div class="main"></div>
    <div class="main_right"></div>
  </div>
  <div class="footer"></div>
</div>

However, this happened instead. No idea why.

Would anyone be so kind as to explore my source code from the links provided, perhaps the CSS as well, and enlighten me as to how I can achieve the look of the middle column shown here, only extended to cover the width of the section between the header and footer?

Thank you very very much.