title: Elements overlapping each other in html page and external CSS not working properly
body: <p>I'm new to html and css and i'm having trouble with a lot of elements.
  The elements in my page keep overlapping each other. Also another problem i keep having is that the CSS doesn't work properly thus making the pictures and other elements the wrong size etc..</p>
  
  <p>this is my HTML code... </p>
  
  <pre><code>        &lt;!doctype html&gt;
          &lt;html lang="en"&gt;
  
          &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="homepageuni.css"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="homepage" content="a homepage for the survey website"&gt;
  
          &lt;title&gt; Kingston University Survey Homepage&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
  
          &lt;img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/&gt;
          &lt;div id = "buttons"&gt;
          &lt;button onclick="window.location='http://www.google.com'" type="button home-button"&gt;Home&lt;/button&gt;
          &lt;button onclick="window.location='http://www.google.com'" type="button contact-button"&gt;Contact Us&lt;/button&gt;
  
          &lt;a href="http://www.w3schools.com/html/"&gt;LogIn&lt;/a&gt;
          &lt;/div&gt;
          &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;img src="homepagepic.jpg" alt="homepagepic" id="middlepic" /&gt;
  
          &lt;div id="footer"&gt;
          &lt;p&gt; copyright &lt;/p&gt; 
          &lt;img src="facebookpic.png" alt="facebookpic" /&gt;
          &lt;br/&gt;
          &lt;img src="twitterpic.jpg" alt="twitterpic"/&gt;
          &lt;/body&gt;
          &lt;/div&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>This is my CSS code...</p>
  
  <pre><code>    #middlepic
      {
          display: block;
          margin-left: auto;
          margin-right: auto;
  
      }
  
      #uni
      {
          display: block;  
          padding-left:50px;
          max-height: 150px;
          max-width: 200px;
          width: 250px;
          height: 250px;
      }
  
      #buttons
      {
  
          top: 50%;
          left: 50%;
          margin-right: auto;
          margin-left: auto;
          width: 300px;
          height: 40px;
      }
  
      #footer
      {
      width: 100px;
      height:100px;
      }
  </code></pre>