HI, I have a slight problem here. My (.wrapper) div is set to 90% width, shouldn't background colour I have set to it extend only inside the (.wrapper) div instead of all the body? It seems that the content is rendering right, and it is centered with 90% width.

Here's the code:

.wrapper {
background: #224466;
      width: 90%;
margin: 5% auto;
border-radius: 6px solid red; 
list-style: none;
     }

     header { 
width: 100%;
margin: 0 auto;
    }

    #search {
float: right;
     }

    #user_widgets {
text-align: right;  
    }

    .origin_cards_text {
width: 100%;
float: right;
text-align: center;
    }

     nav {
text-align: center;
    }
     .global {
float: right;
margin: 1em auto 1em auto;  
width: 100%;
text-align: center;
     }

     .global ul {
float: right;
padding-right: 10%;
      }

      .global ul li { 
float: left;
list-style: none;
      }

      .global li a {  
display: block;
padding: 8px 5px 8px 5px;
text-decoration: none;
font-weight: bold;
color: #069;
text-justify: newspaper;
      }

      .global li a:hover {  
color: #c00;
background-color: #fff; 
      }

      .maincontent {
background: #123456;
float: right;
width: 70%;
      }

      .local_nav {
background: #BADA55;
width: 20%;
margin: 0 auto;
float: left;
list-style: none;
      } ul li {
list-style-type: none;
      }


      footer {  
margin: 0 auto;
width: 100%;
background: #BADA55;
      } 

And the HTML:

<header>
  <div id="search">
  <form>
      <input name="q" placeholder="Look for an item..." autofocus>
      <input type="submit" value="Go">
    </form>
    <div id="user_widgets">
      <p>Login / Register</p>
      <p>My Cart</p>
      <p>Check out</p>
    </div> 
  </div>  
  <div id="logo"> 
    <img src="images/Logo.jpg" width="150" height="100"/>
    <div class="origin_cards_text">
        <h1>Welcome to Origin Cards!</h1> 
        <h2>Creative thinking, creative doing.</h2>  
      </div>   
    </div>
  <nav class="global">
    <ul>
       <li><a href="index.php">Home</a></li>
       <li><a href="cards.php">Cards</a></li>
       <li><a href="pictures.php">Pictures</a></li>
       <li><a href="gifts.php">Gifts</a></li>
       <li><a href="parties_and_workshops.php">Parties &amp; Workshops</a>         </li>
       <li><a href="events_and_exhibitions.php">Exhibitions &amp; Events</a></li>
       <li><a href="contact_us.php">Contact Us</a></li>
      </ul>
      </nav> 
</header>
  <div class="wrapper">
<section class="maincontent">
  <article>
    <p>PQuis auctor ridiculus enim porta tincidunt egestas elementum, lectus platea, et odio ac sed egestas dolor a mattis elit arcu.
       Eros turpis nec rhoncus quis mid mid augue! Montes a, diam et, tincidunt, et velit ultricies, dignissim enim ac 
       purus adipiscing cras! Velit amet egestas aliquet elementum dignissim sociis mid a est, est sit ut cum eu, pellentesque.
        A ridiculus cras sed? Sed ac? Aliquet? Duis mattis augue tincidunt ut, nec porta mus diam! Porta porttitor porttitor,
         in? Pellentesque in egestas massa ultricies sed sit sociis mauris ac mus sociis ac natoque odio massa lorem turpis
          risus integer mid! Magna et quis phasellus cum? Sociis nunc? Scelerisque elementum quis ac penatibus mus! Sed 
          tincidunt? Elit pulvinar rhoncus! Etiam et, dictumst.</p>
  </article>      
</section>
<aside class="local_nav">
  <ul>
    <li><a href="faq.php">FAQ</a></li>
    <li><a href="reference.php">References</a></li>
    <li><a href="subscribe.php">Subscribe</a></li>
    <li><a href="bookmark.php">Bookmark</a></li>
    <li><a href="tell_friend.php">Tell a friend</a></li>
    <li><a href="feedback.php">Feedback</a></li>
    <li><a href="site_map.php">Sitemap</a></li>
  </ul>
</aside>

<?php include("footer.php"); ?>