title: Why is negative margin not working?
body: <p>When you click 'Resume' some text comes in from the left. This is because I gave negative margin to the text initially.</p>
  
  <p>But negative margin of <code>intro_page</code> gives no effect.</p>
  
  <p>What I want is that:</p>
  
  <ol>
  <li><p>When I click <code>resume_page</code>, text of resume should come in from left (this works) and text of <code>intro_page</code> should go out to the right (this doesn't work). </p>
  
  <p>Negative margin of <code>intro_page</code> doesn't seem to be working. Why is that?</p></li>
  <li><p>Initially, page should be empty except the two links. Currently, <code>intro_page</code> page is shown. <code>resume_page</code> is hidden properly, as desired.</p></li>
  </ol>
  
  <p>In short, everything about <code>resume_page</code> works perfectly. I want the exact same things to happen to <code>intro_page</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function clicked_resume(OnScreen)
  {
      var resume = document.getElementById('resume_page');
      if(OnScreen == 1)
      {
          resume.className = '';
          clicked_about(0);
      }
      else if(OnScreen == 0)
      {
          resume.className = 'unseen';
      }
      
  }
  
  function clicked_about(OnScreen)
  {
     
      var about = document.getElementById('intro_page');
      if(OnScreen == 1)
      {
          about.className = '';
          clicked_resume(0);
  
      }
      else if(OnScreen == 0)
      {
          about.className = 'unseen';
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#intro_page.unseen{
   display: block;
   margin-right: -200px;
  }
  
  
  #intro_page{
   margin-right: 0px;
   display: block;
   -webkit-transition: margin-right 1.5s ease-in;
   transition: margin-right 1.5s ease-in;
  }
  
  #resume_page.unseen{
   display: block;
   margin-left: -600px;
  }
  
  #resume_page{
   margin-left: 0px;
   display: block;
   -webkit-transition: margin-left 1.0s ease-in;
   transition: margin-left 1.0s ease-in;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h2 class="title_bar"&gt;
  &lt;ul&gt;
       
   &lt;li&gt;&lt;span onclick = "clicked_about(1)"&gt;About&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span onclick="clicked_resume(1)"&gt;Resume&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
       
  &lt;/h2&gt; 
  
   
  &lt;div id="intro_page" class="unseen"&gt;
   &lt;p id="intro_main_text"&gt; I enjoy reading, swimming, jogging, painting and exploring. &lt;/p&gt;
   &lt;figure class="intro_pic1"&gt;
       &lt;img src="img/award.jpg" alt="Receiving Award" height="50" /&gt;
       &lt;figcaption&gt;Award 2015&lt;/figcaption&gt;
   &lt;/figure&gt;
  &lt;/div&gt;
  
  &lt;div id="resume_page" class="unseen"&gt;
   &lt;p&gt;My resume&lt;/p&gt;
  &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>