title: The div with id 'intro' should be hidden but it shows. What has gone wrong?
body: <p>The div with <code>id="intro"</code> is supposed to be hidden but it shows. The main <code>container</code>, which is div with <code>"id=myQuiz"</code>, has <code>width and height 650px</code> and <code>'overflow' set to 'hidden'</code>. Now, if the div with <code>"class=intro"</code> has <code>margin 660px from the left</code>, it should be hidden because it's margin is higher than the maximum width of the main container. My code is as follows:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;Test Your Knowledge: Saturn&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/quiz.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="myQuiz"&gt;
  
      &lt;h1&gt;Test your knowledge:&lt;span&gt;Saturn&lt;/span&gt;&lt;/h1&gt;
      &lt;div class="progress"&gt;&lt;/div&gt;
      &lt;div class="intro"&gt;&lt;/div&gt;
  
      &lt;h2&gt;Welcome&lt;/h2&gt;
      &lt;p&gt;Click begin to test your knowledge of Saturn&lt;/p&gt;
      &lt;p class="btn"&gt;Begin&lt;/p&gt;
      &lt;div class="question"&gt;&lt;/div&gt;
      &lt;div class="results"&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;/body&gt;
       &lt;/html&gt;
  </code></pre>
  
  <p>CSS code is as follows:</p>
  
  <pre><code>    @import url(http://fonts.googleapis.com/css?                      family=Titillium+Web:900|Roboto:400,100);
  
     body { background-color: #fff; padding: 20px; }
  
     #myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
   width: 650px; height: 650px;
   position: relative;
   overflow: hidden;
   color: #fff;
   background: #000 url(../images/background.jpg) no-repeat 0px 0px;
  }
  #myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100;}
  #myQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100;}
  #myQuiz p { margin: 0px 0px 40px 0px;}
  #myQuiz .btn {
  display: inline-block; cursor: pointer; background-color: #c04b01;
  color: #fff; text-decoration: none;
  padding: 5px 15px; border-radius: 6px;
  }
  
  #myQuiz .intro { position: absolute; top:225px; left: 660px; width: 550px;}
  #myQuiz .intro p { margin: 0px 0px 40px 0px; }
  </code></pre>
  
  <p>Here is the link to my code on jsfiddle.net:</p>
  
  <p><a href="https://jsfiddle.net/h02y8usu/" rel="nofollow noreferrer">https://jsfiddle.net/h02y8usu/</a></p>