Simple HTML/CSS questions

EDIT: I’m having some problems that maybe you or someone else could help me out with.

www.creatingcuisine.com/jim.html
www.creatingcuisine.com/jim.css

For .midcol (the body of text) I have padding set to 30px, but there is no padding for some reason.

Also the width of .midcol is 500px and the width of .leftcol is 100px, making a total of 600px, but it’s obviously not really 600px because .header (“Slim Chanse”) is 600px and the header is obviosuly wider.

If you could take a look at my html and css file and let me know what I’m doing wrong that would be much appreciated. Thanks!

ORIGINAL POST: I’ve just started learning html and css. Could you take a look at this really simple html page as well as its css and let me know if I’m doing it right, or if I should be doing it another way. Should I be using divs? And is the way I arranged the logo and menu side by side (by making the logo float:left) the best way?

www.creatingcuisine.com/jim.html

The CSS for the page is:

body {
margin-top: 0px;
margin-left: 100px;
margin-right: 100px
}

#header {
height: 15px;
background-color: #ccf;
margin: 1em;
padding: 2em;

}

#logo {
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
}

#menu {
margin-top: 3px;
margin-left: 110px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

#menu a:link {
color: #336600;
text-decoration: none;
}

#menu a:visited {
color: #666666;
text-decoration: none;
}

#menu a:hover {
color: #990000;
text-decoration: none;
}

#menu a:active {
color: #666666;
text-decoration: none;
}