You need to learn how to use a web debugging tool like Firebug or Chrome Developer Tools. Then you’ll be able to not only inspect your own site, but a different site as well, so you can copy over whatever values you need, like colors. And if you don’t understand how CSS works, there is a very good tutorial here.
Can I resize the header and the footer too?
You will need to add some CSS rules. Go to Appearance > Theme options, click on the Styling tab, and paste in these rules:
#wrapper {
background-color: #eaeaea;
}
#header, #footer {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
The first rule sets the “outside” background color to the same gray color (#eaeaea) as the Monetizing site; this makes it easier to see the widths of the other elements. You can change it back to white (#ffffff) or to a different color.
The second rule sets the widths of the header & footer to the same width, 1100px, as the main content area.
if I can change the gray color from the sidebar into white like he have?
The widgets on the Monetizados site all have a background color of light gray: #FAFAFA. So you can add this rule:
.widget {
background-color: #FAFAFA;
}