title: Element won't move
body: <p>I have an element in a div that I'm having some problems giving a margin-top.</p>
  
  <p>Instead of moving the element in the div, I can only get it to move the entire div.</p>
  
  <p>It's the purple circle that I want to give a margin-top. </p>
  
  <p><a href="http://jsfiddle.net/9J8R5/" rel="nofollow">http://jsfiddle.net/9J8R5/</a></p>
  
  <pre><code>#step1 {
      width:100px;
      height:100px;
      border-radius:50px;
      background-color:#5020B8;
      left:0;
      right:0;
      margin-left:auto;
      margin-right:auto;
      top:1em;
      font-size:60px;
      color:#ffffff;
      font-family:Cusmyrb;
      line-height:105px;
      text-align:center;
      padding:0;
  }
  </code></pre>