title: Why does the position of my button affect the position of my list?
body: <p>I'm making a webpage using html and css and I have positioned a horizontal list along the bottom of the page, but when I add a button to the centre of the page, it pushed the list further down the page. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .navigation {
     max-width: 700px;
     margin: 0 auto;
     margin-top: 700px;
   }
   .navigation ul {
     list-style: none;
     display: table;
     width: 100%;
   }
   .navigation ul li {
     display: table-cell;
     text-align: center;
   }
   .navigation ul li a {
     padding: 5px 5px;
     width: 100%;
     font-family: "calibri";
   }
   .button {
     -moz-box-shadow: inset 0px 0px 0px 0px #fce2c1;
     -webkit-box-shadow: inset 0px 0px 0px 0px #fce2c1;
     box-shadow: inset 0px 0px 0px 0px #fce2c1;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF9933), color- stop(1, #fb9e25));
     background: -moz-linear-gradient(center top, #FF9933 5%, #fb9e25 100%);
     filter: progid: DXImageTransform.Microsoft.gradient (startColorstr='#FF9933', endColorstr='#fb9e25');
     background-color: #FF9933;
     -webkit-border-top-left-radius: 0px;
     -moz-border-radius-topleft: 0px;
     border-top-left-radius: 0px;
     -webkit-border-top-right-radius: 0px;
     -moz-border-radius-topright: 0px;
     border-top-right-radius: 0px;
     -webkit-border-bottom-right-radius: 0px;
     -moz-border-radius-bottomright: 0px;
     border-bottom-right-radius: 0px;
     -webkit-border-bottom-left-radius: 0px;
     -moz-border-radius-bottomleft: 0px;
     border-bottom-left-radius: 0px;
     text-indent: 0px;
     display: inline-block;
     color: #00000;
     font-family: Arial;
     font-size: 35px;
     font-weight: bold;
     font-style: normal;
     height: 90px;
     line-height: 100px;
     width: 500px;
     text-decoration: none;
     text-align: center;
     text-shadow: 1px 1px 0px #cc9f52;
     margin-left: 550px;
     margin-top: 300px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;title&gt;website&lt;/title&gt;
  &lt;body&gt;
  
    &lt;a href="#" class="button"&gt;UPLOAD&lt;/a&gt;
  
    &lt;div class="navigation"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Sign Up&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;RFR&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>