Trying to move a button further down the page
<p>I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.</p>

<p>Here's the code I have for it in HTML:</p>

<pre><code> &lt;div class="crown"&gt;
        &lt;div class="container"&gt;
          &lt;img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200"&gt;
             &lt;h3&gt;&lt;strong&gt;Join today!&lt;/strong&gt;&lt;/h3&gt;
              &lt;p style="text-align: center;"&gt;&lt;a class="btn-two" href="#"&gt;Register&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;


    &lt;section class="footer"&gt;
      &lt;div class="container"&gt;
          &lt;p&gt;&amp;copy; 2016&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/body&gt;
  &lt;/html&gt;
</code></pre>

<p>And here's the CSS for it:</p>

<pre><code>.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
</code></pre>

<p>I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.</p>