margin issue

[tapi0n]

I'll start off by posting snippets where I'm having issues.

HTML:

<div id="content">
  <article class="main">
   <figure>
   </figure>
   <h1>TestHeader1</h1>
   <p>Dit is een testArticle.knzaokdnazodknazokdna
     zodnazodnazdonazdnazdnazodknazodnazodnazkdnonzando
       nazdondaokzdnkoazndkoazdnazokdnzakodnazokdnazodnazo
       dnazodnazdnzadklazndlazkndoizadazd...</p>
  </article>
</div> 

CSS:

#content {
    width:60%;
    margin-left:auto;
    margin-right:auto;
    background-image:url('images/grassText01.png');
    border-radius:20px;
    box-shadow:1px 1px 5px #D8D8D8;
    min-height:500px;
}

.main {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    min-height:125px;
    border:2px solid #C22026;
} 

The div is the main content window on the site, the articles could be something like news items. When I try to add a margin-top to the .main, expecting a margin between the top of the div and the top of the article, the entire div gets a margin.

Does anyone know what could be causing this?

Cheers.

EDIT: Found a solution, used padding in the div. Although this solves my problem, I'm still questioned as to why the margin problem prompted. If any insight feel free to share. Cheers, tap

[absolutmgd13]

i had no problem adding 'margin-top' to '.main'. worked perfectly. 'width:60%;' should be 'width:60%;'