Hello people,

So, I'm currently learning website design in my spare time and I was advised to put my 'margin' and website inside of a wrapper instead of the <body> tags, how would I go about doing this?

heres my code, as I said, I'm new to this :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <link rel="shortcut icon" href="favicon.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Motion Gaming Community Clan</title>
        
        <style type="text/css">

ul.botmenu {
  list-style: none;
  padding: 0px;
  }

.displace {
  position: absolute;
  left: -5000px;
  }

ul.botmenu li {
width:112px;
height:112px;
border:none;
display:inline-block;
vertical-align:middle;
  }

ul.botmenu li a {
  display:inline-block;
  width: 112px;
  height: 112px;
  background: url('bigb.png');
  }


                      ul.botmenu li.stegroup a {
                      background-position: 1px -122px;
                 }

                      ul.botmenu li.emailad a {
                      background-position: 0px -231px;
                 }

                      ul.botmenu li.skype a {
                      background-position: 0px -11px;
                 }
 

                      ul.botmenu li.stegroup a:hover {
                      background-position: -118px -122px;
                 }

                       ul.botmenu li.emailad a:hover {
                       background-position: -118px -231px;
                 }

                       ul.botmenu li.skype a:hover {
                       background-position: 122px -11px;
                 }
ul.cssmenu {
  list-style: none;
  padding: 0px;
  }

.displace {
  position: absolute;
  left: -5000px;
  }

ul.cssmenu li {
  float: left;
  }

ul.cssmenu li a {
  display: block;
  width: 97.5px;
  height: 48px;
  background: url('IMG.png');
  }


                      ul.cssmenu li.home a {
                      background-position: 0px -96px;
                 }

                      ul.cssmenu li.about a {
                      background-position: 0px -48px;
                 }

                      ul.cssmenu li.forum a {
                      background-position: 0px 0px;
                 }
 

                      ul.cssmenu li.home a:hover {
                      background-position: -292px -96px;
                 }

                       ul.cssmenu li.about a:hover {
                       background-position: -97.5px -48px;
                 }

                       ul.cssmenu li.forum a:hover {
                       background-position: 97.5px 0px;
                 }

                a:link {
                          color:#000000;
                          text-decoration:none;
                     }
                body {
                        text-align: center;
                        background-image:url(gowallpaper.jpg);
                        margin:50px 0px; padding:0px; 
                }
                
                #pagewrap {
                        position: relative;
                        margin-left: auto;
                        margin-right: auto;
                        border:2px  solid;
                        border-color: #ffffff;  
                        width:462px; 
                        height:400px; 
                        background-color:#484a1e;
                        
              }
              #maincontent {
              width:400px;
              height:200px;
              margin:auto;
              text-align:left;
              color:#FFA500;
              font-family:tahoma;
              font-size:12pt;
              font-weight:bold;
              font-variant:small-caps;
              }
              .steampage {
              margin-left:auto;
              margin-right:auto;
              width:462px;
              height:112px;
              }
                #nbar {
                        position: absolute;
                        top: -2px;
                        right: 101%;
                        width:100px;
                        height:200px;
                        text-align:right; color:white; font-family: tahoma;
                }
                #h1 {
                  text-align:center;
                  color:#d1ff00;
                  font-family:tahoma;
                  font-size:16pt;
                }
              }
 </style>

</head>

                   <body id="homepage">

                     <div id="banner" style="margin: 0 auto;width:462px;height:116px;border: 2px solid white;">
                     <img src="motionban.png" alt="clan banner"/>
              </div>

         <br/>
  
  <div id="pagewrap">

    <h1 id="h1">Motion News</h1>

    <div id="maincontent">

      Join The Group. Wear The Tag, Spread The Word.
  
  </div>

    <div id="nbar">

      <ul class="cssmenu">

  <li class="home"><a href="home.html" class="selected" title="home"><span class="displace">Home</span></a></li>
  <li class="about"><a href="about.html" title="about"><span class="displace">about</span></a></li>
  <li class="forum"><a href="http://steamcommunity.com/groups/motiongamingclan/discussions/" title="forum"><span class="displace">forum</span></a></li>

</ul>

    </div>
              
               </div>


 <div class="steampage">
     
     <ul class="botmenu">
        
  <li class="stegroup"><a href="http://steamcommunity.com/groups/motiongamingclan" class="selected" title="home"><span class="displace">steamgroup</span></a></li>
  <li class="emailad"><a href="mailto:cazcsgo@gmail.com" title="emailadmin"><span class="displace">emailadmin</span></a></li>
  <li class="skype"><a href="skype:itscaz2?call" title="skype"><span class="displace">skypeadmin</span></a></li>
</ul>
              </div>

                  
        
</body>
</html>