title: Website layout different between jsfiddle and cloud 9's browser
body: <p>I am using Cloud 9 IDE for developing a website.</p>
  
  <p>However site layout is different.</p>
  
  <p>Code snippet is provided</p>
  
  <p>When I am using the inbuilt browser in Cloud 9, I am getting the html page as shown in stack snippet. However, when I maximize it(cloud 9 browser) and see it in firefox, I get different layout<a href="https://i.stack.imgur.com/lwUXQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwUXQ.png" alt="enter image description here"></a></p>
  
  <p>The menu is coming on the top of image.</p>
  
  <p>I am not sure, why it is happening.</p>
  
  <p>However question is, how can I make sure, that website layout is same whether I use stack snippet, cloud 9's inbuilt browser or I maximize Cloud 9's browser in my firefox.</p>
  
  <p>Please let me know, if you need additional information.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.headerSection{
      background-color: #FECB6E;
   margin-bottom:1px;
   margin-top:1px;
  }
  
  #active{
      border-top: thin solid gray;
      border-left: thin solid gray;
      border-right: thin solid gray;
      background:#E6E6E6;
  }
  
  .jumbotron {
    background-image:url('http://img11.deviantart.net/3e48/i/2010/044/2/8/programming_oop_wallpaper_red_by_hexeno.png');
    width:100%;
    height:250px;
  }
  
  #footnote #wormHole {    
       padding-top:0;
       overflow:hidden;
       width:100%;
       height:20%;
       color:#000;
    transform: translateY(-50%);
       text-align:center;
       z-index:1;
       opacity: 1.0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="headerSection"&gt;
    &lt;div class="col-md-4"&gt;
     &lt;ul class="nav nav-pills"&gt;
         &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="https://knowledge-portal-tusharsaurabh.c9.io/select.php" target="_blank"&gt;Programming&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4"&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4"&gt;
        &lt;ul class="nav nav-pills pull-right"&gt;
         &lt;li&gt;&lt;a href="https://knowledge-portal-tusharsaurabh.c9.io/submitalink.php" target="_blank"&gt;Submit A Link&lt;/a&gt;&lt;/li&gt;
         &lt;li id='active'&gt;&lt;a href="https://knowledge-portal-tusharsaurabh.c9.io/generalfeedback.php" target="_blank"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt; 
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="jumbotron"&gt;
    &lt;div class="container"&gt;
           &lt;h1 id="wormHole"&gt;WORMHOLE.&lt;/h1&gt;
           &lt;p id="footnote"&gt;Web portal to Programming.&lt;/p&gt;
         &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>