title: Why is my footer showing on top of my page?
body: <p>I have a really simple code, but somehow the footer is showing on top of my page. As you can see I'm not using any floats, wrappers, grids or anything else. You can find the code right under this text. Can anyone help me figure out why is this happening and how can I prevent this from happening again in the future?
  Thank you in advance!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style type="text/css"&gt;
  
  body {
        margin:0px;
       }
  
  
  main {
        margin: 1cm auto;
        width: 50%;
        padding: 1cm;
        border: 1px solid black;
       }
  
  
   nav {
       border: 1px solid black;
       }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;footer&gt; Service Networking &lt;/footer&gt;
  
  &lt;nav&gt;
     &lt;label&gt;Name: &lt;input type="text" name="name"&gt; &lt;/label&gt;
     &lt;label&gt;Surname: &lt;input type="text" name="surname"&gt; &lt;/label&gt;
  &lt;/nav&gt;
  
  &lt;main&gt;
     &lt;h1&gt; Welcome! &lt;/h1&gt;
     &lt;p&gt; This is your first page &lt;/p&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>