title: HTML positioning: overlap between navigation bar and text
body: <p>It's so basic but I don't seem to be able to get it right. Part of the body text that follows after the navigation bar gets positioned underneath the navigation bar. Also when there's an alert message (e.g. wrong credentials) it gets positioned underneath the navigation bar so that it can't be read. What am I doing wrong? (I'm using Rails 3.2 and Ruby 4).</p>
  
  <p>In application.html.erb I have:</p>
  
  <pre><code>  &lt;%= render "layouts/header" %&gt;
    &lt;% flash.each do |name,msg| %&gt;
      &lt;p class="alert"&gt;&lt;%= content_tag :div, msg, :id =&gt; name %&gt;&lt;/p&gt;
    &lt;% end %&gt;
    &lt;p class="notice"&gt;&lt;%= notice %&gt;&lt;/p&gt;
    &lt;%= yield %&gt;
    &lt;%= render "layouts/footer" %&gt;
  </code></pre>
  
  <p>Part of the html code that this renders:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
  ...etc...
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
    &lt;p class="notice"&gt;&lt;/p&gt;
  
    &lt;h2&gt;Log in&lt;/h2&gt;
  
  &lt;form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="GRy...00Z1w=" /&gt;&lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="user_email"&gt;Email&lt;/label&gt;&lt;br /&gt;
  ...etc...
  </code></pre>
  
  <p>With regard to the CSS I use <em>bootstrap</em> in addition to:</p>
  
  <p>-CSS for the navigation:</p>
  
  <pre><code>.nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
  }
  
  .nav li {
    display: inline;
  }
  
  .loginnaam {
      font-size: 11px;
      padding: 16px 10px;
  }
  </code></pre>
  
  <p>-CSS for the text:</p>
  
  <pre><code>/* JUMBOTRON ON HOME
  ================================================== */
  .jumbotron {
    background-image: url('http://www.....com/....jpg');
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .jumbotron h1 {
    color: #fff;
    font-size: 48px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
  }
  
  .jumbotron p {
    font-size: 20px;
    color: #fff;
  }
  
  
  /* CUSTOMIZE THE CAROUSEL
  ================================================== */
  /* Carousel base class */
  .carousel {
    height: 500px;
    margin-bottom: 60px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 500px;
    background-color: #777;
  }
  .carousel-inner &gt; .item &gt; img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
  }
  
  
  /* ILLUSTRATIES
  ================================================== */
  .illustraties{
      background-color: #efefef;
      border-bottom: 1px solid #dbdbdb;
  }
  
  .learn-more {
    background-color: #f7f7f7;
  }
  
  .learn-more h3 {
    font-family: 'Shift', sans-serif;
    font-size: 18px;
    font-weight: bold;
  }
  
  .learn-more a {
    color: #00b0ff;
  }
  </code></pre>