title: How do I prevent my H1 tag from moving out of sight (dissapearing)?
body: <p>I haven't done much html and css lately and I can't figure out why my H1 disappears out of sight when I re-size the browser...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;script type="text/javascript src="Jquery1_10_2.js"&gt; &lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="bootstrap.css" media="screen" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="LogIn_Page.css" media="screen" /&gt;
  &lt;!--    &lt;script type="text/javascript src="LogIn_Page.js"&gt; &lt;/script&gt; --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container"&gt;
  
      &lt;a href="http://somesite.com/" title="Web Site"&gt; &lt;img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px"&gt; &lt;/a&gt;
      &lt;a href="http://www.somesite2.org/" title="Web Site"&gt; &lt;img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;"&gt; &lt;/a&gt;
      &lt;a href="http://somesite3.com/" title="somesite Web Site"&gt; &lt;img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;"&gt; &lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;div class="container body-content" style="margin-top: 125px;"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt; 
              &lt;H1 style="margin-bottom: 50px;"&gt;Welcome to the Crops web application&lt;/H1&gt;
              &lt;P&gt;Please login:&lt;/P&gt; 
  
              &lt;button onclick="window.location.href=&amp;quot;/auth&amp;quot;" &gt;Login link&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
  
  
      &lt;div id="footer"&gt;
  
          &lt;footer&gt;
          &lt;script&gt;window.onload = function() {
          var d = new Date();
          var n = d.getFullYear();
          document.getElementById("date").innerHTML = "© " + n + " My company";}&lt;/script&gt; 
              &lt;p id="date"&gt;&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The three images stack on top of each other like they are supposed to, but its just the H1 tag that dispersal totally. I haven't even used any custom css, except for the default bootstrap package.</p>
  
  <p>Could someone point me out to the right solution?</p>
  
  <p>I tried putting inside the H1 tag the following styles: position, float, height, width, min-height, min-width, but none of those seem to work out for me it just keeps disappearing when I size down the browser to the max. Its there when the browser is full screen of course....</p>