Having an issue with a parent container background that drops out after the first child container. The border encompasses the contents properly, but the background disappears.
(PS I have validated the HTML and the CSS)

Here are the excerpts from the HTML and CSS files ...
I'm pretty new at this, so any enlightenment would be much appreciated


<!-- START BODY -->
<div class="outer">

<!-- page header ======================================== -->
<div class="container">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" background="images_Blueberry/head-blueberry.jpg">
<a href="index.htm">
<img border="0" src="images_Blueberry/nav/back.png" style="float: right" width="75" height="38" alt="."/></a>
<h1 class="page-title">'B' is for BUSINESS</h1>
<!-- end of page header
***this is where the background stops, the border continues to the end
======================================== -->

<!-- start 3 columns -->
<div class="container">
<div class="span-one-third-1st">
<a href="../contact.htm#email">
<img border="0" src="images_Blueberry/cnt/contact-icon-email.png" width="30" height="30" alt="SEND US AN EMAIL"/></a>&nbsp;&nbsp;&nbsp;
<a href="../contact.htm#phone">
<img border="0" src="images_Blueberry/cnt/contact-icon-phone.png" width="30" height="30" alt="GIVE US A CALL"/></a>&nbsp;&nbsp;&nbsp;
<a href="../contact.htm#post">
<img border="0" src="images_Blueberry/cnt/contact-icon-snail.png" width="30" height="30" alt="POST A LETTER"/></a>
<p class="sidebar">
<a class="Links2" href="link_B.htm" alt="BUDGETING">BUDGETING</a></br>
<a class="Links2" href="link_B.htm" alt="BENEFITS">BENEFITS</a></br>&nbsp;</br>
<a class="Links2" href="link_B.htm" alt="BRANDING">BRANDING</a></br>&nbsp;</br>
<a class="Links2" href="link_B.htm" alt="BIDDING">BIDDING</a></p>
<p class="marginL4"> -yaddah yaddah

/* == CONTAINERS ================================================== */

/* -- main container - white background with deep purple border -- */

.outer {
outline: 8px; outline-style: solid; outline-color: #4D0165;
margin: 6px; padding: 2px;
background-color:#ffffff; height: 100%;

.container {
text-align: left;
outline: 0px;