What is this wrapper and container thing?

My site is
code is

/* =Structure
----------------------------------------------- */

body {
padding: 0 3.8%;
}
#wrapper {
max-width: 850px;
margin: 0 auto;
}
#container {
clear: both;
margin: 0 auto;
}
#wrapper #container {
margin: 0 4.7%;
}
#header {
float: center;
width: 100%;
}
#content-box {
width: 100%;
}
#content-container {
width: 100%;
border: 6px inset #0000FF;
}
Content {
}
#main-sidebars {
max-width: 450px;
width: 45.5%;
margin: 70px;
}

I want to decrease the width of my page. Also leave some margine between content and border around it.

Reduce the width of your wrapper:

#wrapper {
max-width: 750px;
margin: 0 auto;
}

Which ever item (content-box, content-container or content) holds your content, add padding to that item.

Content {
padding: 10px;
}