The main inherits the width of the body

I'm a beginner with HTML. The side i'm about to build is http://sv-lasserg.de/index.php?page=home . Here are Index.php and layout.css: http://jsfiddle.net/z57mqjor/ . Main Parts of the CSS:

html {background-color: #d1d1d1;}

body {

  width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  font-family: verdana;
  font-size: 100%;
  color: #000000;}

main {
padding: 20px 20px 20px 20px;
position: relative;
width: 617px;}

My problem is that the main class inherits attributes like width from the body and doesn't recognize the attributes given in CSS to main itself. Why does main inherit everything from body?


Shouldn't there be a period in front of Main like this?

.main {