title: add two vertical lines (rectangle) on right and left side of html page
body: <p>I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
  A bit of help would be very much appreciated...Thanks very much indeed
  Edit: the code has now been added</p>
  
  <pre><code>            &lt;!doctype html&gt;
              &lt;html lang="en"&gt;
  
              &lt;head&gt;
              &lt;style&gt;
              #button1{
              width: 300px;
              height: 40px;
  
              }
  
              #button2{
              width: 300px;
              height: 40px;
              }
  
              #link1{
              font-size: 33px;}
  
              #pic1 {
                   position:fixed;
                  left:30%;
                  top:30%;
                  margin-left:-382px /*half the width*/
                  margin-top:-370px /*half the height*/
              }
  
  
  
              &lt;/style&gt;
  
              &lt;meta charset="utf-8"&gt;
              &lt;meta name="Homepage" content="Starting page for the survey website "&gt;
  
              &lt;title&gt; Survey HomePage&lt;/title&gt;
              &lt;/head&gt;
  
              &lt;body&gt;
  
              &lt;img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px"&gt;
              &lt;button type="button home-button" id="button1" &gt;Home&lt;/button&gt;
              &lt;button type="button contact-button" id="button2"&gt;Contact Us&lt;/button&gt;
              &lt;a href="http://www.w3schools.com/html/" id="link1"&gt;LogIn&lt;/a&gt;
              &lt;img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px"&gt;
  
  
  
              &lt;/body&gt; 
              &lt;/html&gt;
  </code></pre>